Question

我正在学校为一堂课创建一个记忆游戏，我正在使用Bootstrap和jQuery。见Github。对于测试使用此jsfiddle，因为github代码将更改，如果您想为自己的目的分叉它，我已经包含它。

我已经按照以下逻辑构建了代码：

选择您想要玩多少张牌。
卡片被加载并随机化。每对都有相同的类（card *和glyphicon *）。
您点击一张卡片，然后点击另一张卡片，如果匹配则会被丢弃，否则您会再次选择。

我目前遇到的问题是第三步，即当你点击第三张牌时它显示前两张，这意味着我需要包含一些东西来逃避第一次点击事件。至少这是我对这个问题的第一个建议。如果您有其他建议要完全重组第三步，请不要羞于详细解释原因。

// check if picked cards' classes match     
jQuery("[class^=card]").click(function() { //picking the first card
    jQuery(this).css('color', '#000');
    var firstCard = $(this);
    var firstCardClass = $(this).find('[class*=glyphicon]').attr('class').split(' ')[1];
    jQuery("[class^=card]").click(function() { //picking the second card
        var secondCard = $(this);
        var secondCardClass = $(this).find('[class*=glyphicon]').attr('class').split(' ')[1];
        console.log(firstCardClass);
        console.log(secondCardClass);
        if (firstCardClass == secondCardClass) {
            console.log("yes")
            $(firstCard).css('color', '#005d00'); //make them green
            $(secondCard).css('color', '#005d00');

            setTimeout(function() {
                $(firstCard).css('display', 'none'); //discard
                $(secondCard).css('display', 'none');
            }, 1000);
        } 
        else {
            console.log("no");
            $(firstCard).css('color', '#cc0000'); //make them red
            $(secondCard).css('color', '#cc0000');

            setTimeout(function() {
                $(firstCard).css('color', '#fff'); //hide again
                $(secondCard).css('color', '#fff');
            }, 1000);
        }
    });
});

请注意，图标应该是白色的卡片，使它们变成灰色，以便在不需要萤火虫的情况下匹配。如果您点击两张以上的卡片，您将看到问题所在（如果我没有很好地解释它）。我尝试在每个语句的末尾包含单击unbind事件，但无法使其工作。

尽力而为！谢谢！

Answer 1

已编辑：

似乎我误解了这个问题，所以这就是我将如何进行这样的游戏。

首先我会让我的牌有这样的结构：

<span class="card" data-card-type="one">One</span>

我将使用data-card-type来比较两张牌是否属于同一类型

我将有一个全局变量firstCard，它原来是null，如果为null我将点击的卡分配给它，如果不是我将点击的卡与它进行比较然后是否匹配，我指定null到它意味着另一个配对已经开始。

我将在一个onclick中执行所有逻辑，看起来很奇怪在另一个内部有一个点击监听器使它看起来过于复杂。

var firstCard = null;

$('.card').on('click', function() {
    $(this).addClass('selected');
    if(!firstCard)
        firstCard = $(this);
    else if(firstCard[0] != $(this)[0]) {
        if(firstCard.data('card-type') == $(this).data('card-type')) {
            firstCard.remove();
            $(this).remove();
            firstCard = null;
            //$('.card.selected').removeClass('selected');
        }
        else {
            firstCard = null;
            $('.card.selected').removeClass('selected');
        }
    }
});

jsfiddle DEMO

Answer 2

点击卡片后，您可以为该特定卡片添加课程（例如，课程名称clickedcard）。每当您单击另一张卡时，您可以测试是否有2张卡具有此clickedcard类。如果是这样，您可以采取措施，例如删除所有clickedcard类，并再次向新单击的类添加一个。

在伪代码中，我会这样做：

jQuery("[class^=card]").click(function() { 
    if (jQuery('.clickedcard').length == 2) {
       // two cards where clicked already... 
       // take the actions you want to do for 2 clicked cards

       // you can use jQuery('.clickedcard')[0] and jQuery('.clickedcard')[1]
       // to address both clicked cards

       jQuery('.clickedcard').removeClass('clickedcard');
    } else {
       // no card or only one card is clicked
       // do actions on the clicked card and add classname
       jQuery(this).addClass('clickedcard');
    }
});

Answer 3

您可以使用“one”（将事件绑定一次）：

$("[class^=card]").one(`click', firstCard);

function firstCard() { //picking the first card
  $(this).css('color', '#000');
  var firstCard = $(this);
  var firstCardClass = $(this).find('[class*=glyphicon]').attr('class').split(' ')[1];
  $("[class^=card]").one('click', secondCard);

 function secondCard() { //picking the second card
    var secondCard = $(this);
    var secondCardClass = $(this).find('[class*=glyphicon]').attr('class').split(' ')[1];
    console.log(firstCardClass);
    console.log(secondCardClass);
    if (firstCardClass == secondCardClass) {
        console.log("yes")
        $(firstCard).css('color', '#005d00'); //make them green
        $(secondCard).css('color', '#005d00');

        setTimeout(function() {
            $(firstCard).css('display', 'none'); //discard
            $(secondCard).css('display', 'none');
        }, 1000);
    } 
    else {
        console.log("no");
        $(firstCard).css('color', '#cc0000'); //make them red
        $(secondCard).css('color', '#cc0000');

        setTimeout(function() {
            $(firstCard).css('color', '#fff'); //hide again
            $(secondCard).css('color', '#fff');
        }, 1000);
    }
    $("[class^=card]").one(`click', firstCard);
  }
}

第二次单击后jQuery unbinding事件

3 个答案: