jQuery比较两个变量以查看它们是否匹配，但一个变量不范围

Question

对于一个小拼图/记忆游戏，我想比较两个拼图。如果它们是相同的（有相同的字母），我想提醒（'匹配'）。我认为我的方式正确，但是现在，一个变量似乎不超出范围，因为我不知道我的代码中应该把它放在哪里。因此，现在它返回了第二件，但第一件保持不确定。你能帮我吗？非常感谢它！

单击Shuffle＆amp;在那之后显示2件，您将看到"未定义"的语句。我想知道为什么它不起作用，什么会使它起作用以及原因：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与问题

Answer 1

您需要在功能之外移动txt变量，以便在第二次单击时可以读取它。这样的东西：

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
}

工作小提琴

---

使用难看的外部变量的一种替代方法是在具有第一张卡值的容器上设置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);
}

示例小提琴

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/