Jquery 比较两个变量看它们是否匹配，但其中一个超出范围？

Question

对于一个小型拼图/内存游戏，我想比较拼图的两 block 。如果它们相同(具有相同的字母)，我想提醒(“匹配”)。我认为我的方法是正确的，但现在其中一个变量似乎超出了范围，因为我不知道应该将它放在代码中的哪个位置。所以现在它返回第二部分，但第一部分保持未定义。你能帮我吗？非常感谢!

点击shuffle & show，然后点击2 block ，你会看到'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 变量移到函数之外，以便在第二次单击时可以读取它。像这样的事情:

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属性，如下所示:

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