Jquery比較兩個變量，看它們是否匹配，但是一個超出範圍？

Question

對於一個小拼圖/記憶遊戲，我想比較兩個難題。如果他們是相同的（有相同的字母），我想提醒（'匹配'）。我認爲我是正確的，但現在其中一個變量似乎超出了範圍，因爲我不知道我應該把代碼放在哪裏。所以現在它返回第二塊，但第一塊保持未定義狀態。你能幫我嗎？非常感謝！

點擊shuffle &顯示，之後點擊2件，你會看到'undefined'語句。 我想知道爲什麼它不工作，什麼會使其工作，爲什麼：P

HTML

<button id="shuffle">Show and Shuffle</button> 

<div id="container"> 
    <div class="choices"><div class="letter">A</div></div> 
    <div class="choices"><div class="letter">B</div></div> 
    <div class="choices"><div class="letter">C</div></div> 
    <div class="choices"><div class="letter">A</div></div> 
</div> 

JS

var amountofclicks = 0; 
var firstcard = false; 
var secondcard = false; 

$('#shuffle').bind('click', function() { 

    var divs = $("div.choices").get().sort(function() { 
     return Math.round(Math.random()); 
    }).slice(0, 16); 

    $(divs).appendTo(divs[0].parentNode).show(); 

}); 

$('.choices').bind('click', function() { 

    if (amountofclicks < 2) { 
     amountofclicks++; 
     $(this).unbind('click'); 
     if (amountofclicks == 1) { 
      firstcard = true; 
      var txt = $(this).find('.letter').text(); 

     } 

     if (amountofclicks == 2) { 
      secondcard = true; 

      var txt2 = $(this).find('.letter').text(); 
      alert(txt + ' ' + txt2); 


     } 

    } 

}); 

JSFIDLLE WITH PROBLEM

Answer 1

您需要將您的txt變量移到t之外他的功能可以在第二次點擊時閱讀。事情是這樣的：

var amountofclicks = 0; 
var firstcard = false; 
var secondcard = false; 
var txt; // store here 

然後您需要刪除從最初設定值就行了var：

if (amountofclicks == 1) { 
    firstcard = true; 
    txt = $(this).find('.letter').text(); // note: 'var' removed 
} 

Working fiddle

---

使用難看的外部變量的另一種方法是在容器上設置一個data attibute，該容器具有第一張牌的價值，如下所示：

if (amountofclicks == 1) { 
    firstcard = true; 
    $("#container").data('first-letter', $(this).find('.letter').text()); 
} 

if (amountofclicks == 2) { 
    secondcard = true; 

    var txt = $("#container").data('first-letter'); 
    var txt2 = $(this).find('.letter').text(); 
    alert(txt + ' ' + txt2); 
} 

Example fiddle

Answer 2

你的代碼的第一塊似乎是確定。第二件不是。它可以變得更加容易

var amountofclicks = 0; 
var firstcard = false; 
var secondcard = false; 

$('#shuffle').bind('click', function() { 

    var divs = $("div.choices").get().sort(function() { 
    return Math.round(Math.random()); 
    }).slice(0, 16); 

    $(divs).appendTo(divs[0].parentNode).show(); 

}); 

var firstChoise = null; 

$('.choices').bind('click', function() { 
    var $self = $(this); 
    if (firstChoise == null) { 
    firstChoise = $self.find('.letter').html(); 
    } else if (firstChoise == $self.find('.letter').html()) { 
    alert('Choise: 2x'+firstChoise); 
    firstChoise = null; 
    } else { 
    alert('Choise: 1x'+firstChoise+' 1x'+$self.find('.letter').html()); 
    firstChoise = null; 
    } 
});​ 

http://jsfiddle.net/czGZZ/1/