jQuery fadeOut鏈接對

Question

我正在製作一款文字遊戲來幫助我學習德語。我有2個陣列，一個用於德語，另一個用於英語。然後，我把所有的單詞都顯示在HTML頁面上，作爲一個「語言」和「位置」類的鏈接，這是一個有空格的數字。我想要的是德語和英語單詞fadeOut，當他們配對在一起。這是單擊事件我到目前爲止：

function setup() 
{ 
    var check = { language: undefined, position: null }; 

    $("a").on("click", function() 
    { 
     var attributes = $(this).attr("class").split(" "); 

     if (attributes[0] == "german") { 
      if (check["language"] == "german") { 
       alert("German word already clicked!"); 
       check["language"] = undefined; 
       check["position"] = null; 
       return; 
      } 

      if (check["language"] == "english") { 
       if (check["position"] == attributes[1]) { 
        $(this).fadeOut(800); 
       } 
      } 

      check["language"] = attributes[0]; 
      check["position"] = attributes[1]; 
     } 

     if (attributes[0] == "english") { 
      if (check["language"] == "english") { 
       alert("English word already clicked!"); 
       check["language"] = undefined; 
       check["position"] = null; 
       return; 
      } 

      if (check["language"] == "german") { 
       if (check["position"] == attributes[1]) { 
        $(this).fadeOut(800); 
       } 
      } 

      check["language"] = attributes[0]; 
      check["position"] = attributes[1]; 
     } 
    }); 
} 

編輯：

function wordlist(obj) 
{ 
    for (i = 0; i < obj["wordlist"].length; i ++) { 
     $("#main .span12").append("<a href=\"#\" class=\"" + obj["language"] + " " + i + "\">" + obj["wordlist"][i] + "</a><br/>"); 
    } 
} 

披露：

我已經完成了我的文字遊戲，所以我決定給回提交我的最終版本，以便其他人可以使用。遊戲還支持隨機合併在一起的單詞列表。如果您認爲可以改進代碼，請發表評論。

$(document).ready(function() 
{ 
    (function training() 
    { 
     Array.prototype.shuffle = function() 
     { 
      var i = this.length, j, temp; 
      if (i == 0) return this; 

      while (--i) { 
       j = Math.floor(Math.random() * (i + 1)); 
       temp = this[i]; 
       this[i] = this[j]; 
       this[j] = temp; 
      } 
      return this; 
     } 

     var german = 
     { 
      language: "german", 
      wordlist: 
      [ 
       "der Zusammenhang", 
       "der Wirt", 
       "der Kaufmann", 
       "das Gesetz", 
       "(sich) klammern (an)", 
       "der Lastwagen", 
       "die Akte", 
       "das Gericht", 
       "zahlen", 
       "zählen (bis, auf)" 
      ] 
     }, 
     english = 
     { 
      language: "english", 
      wordlist: 
      [ 
       "connection", 
       "landlord", 
       "dealer", 
       "law", 
       "to attach (to)", 
       "truck", 
       "file", 
       "dish", 
       "to pay", 
       "to count (to, on)" 
      ] 
     }; 

     function generate(obj) 
     { 
      var array = []; 

      for (i = 0; i < obj["wordlist"].length; i ++) { 
       array.push("<a href=\"#\" class=\"" + obj["language"] + " " + i + "\">" + obj["wordlist"][i] + "</a><br/>"); 
      } 
      return array; 
     } 

     var german = generate(german); 
     var english = generate(english); 

     var wordlist = german.concat(english); 
     wordlist.shuffle(); 

     $("#main .span12").append(wordlist); 

     (function setup() 
     { 
      var check = { language: undefined, position: null }; 

      $("a").on("click", function() 
      { 
       var attributes = $(this).attr("class").split(" "); 

       if (attributes[0] == "german") { 
        if (check["language"] == "german") { 
         alert(" German word clicked!\nPlease click an English word."); 
         check["language"] = undefined; 
         check["position"] = null; 
         return; 
        } 

        if (check["language"] == "english") { 
         if (check["position"] == attributes[1]) { 
          $("." + attributes[1]).fadeOut(800); 
          $("." + attributes[1]).remove(); 
         } 
        } 

        check["language"] = attributes[0]; 
        check["position"] = attributes[1]; 
       } 

       if (attributes[0] == "english") { 
        if (check["language"] == "english") { 
         alert("  English word clicked!\nPlease click a German word."); 
         check["language"] = undefined; 
         check["position"] = null; 
         return; 
        } 

        if (check["language"] == "german") { 
         if (check["position"] == attributes[1]) { 
          $("." + attributes[1]).fadeOut(800); 
          $("." + attributes[1]).remove(); 
         } 
        } 

        check["language"] = attributes[0]; 
        check["position"] = attributes[1]; 
       } 
      }); 

      (function loop() 
      { 
       var timer = setTimeout(loop, 1000); 
       var links = $("a"); 

       if (links.length == 0) { 
        clearTimeout(timer); 
        alert("Well done!"); 
        return; 
       } 
      })(); 
     })(); 
    })(); 
}); 

Answer 1

Replce

$(this).fadeOut(800); 

到

$("."+attributes[1]).fadeOut(800); 
OR 
$("."+check["position"]).fadeOut(800); 

Answer 2

我認爲這應該工作。

function setup() 
{ 
var check = { language: undefined, position: null }; 
$("a").on("click", function() 
{ 
    var attributes = $(this).attr("class").split(" "); 

    if (attributes[0] == "german") { 
     if (check["language"] == "german") { 
      alert("German word already clicked!"); 
      check["language"] = undefined; 
      check["position"] = null; 
      return; 
     } 

     if (check["language"] == "english") { 
       $("a." + check["language"]).fadeOut(800); 
       $("a").not("a." + check["language"]).fadeIn(800); 
     } 

     check["language"] = attributes[0]; 
     check["position"] = attributes[1]; 
    } 

    if (attributes[0] == "english") { 
     if (check["language"] == "english") { 
      alert("English word already clicked!"); 
      check["language"] = undefined; 
      check["position"] = null; 
      return; 
     } 

     if (check["language"] == "german") { 
       $("a." + check["language"]).fadeOut(800); 
       $("a").not("a." + check["language"]).fadeIn(800); 
     } 

     check["language"] = attributes[0]; 
     check["position"] = attributes[1]; 
    } 
}); 
}