jQuery第二次点击后解​​除绑定事件

Question

我在学校为班级创建了一个记忆游戏，我使用的是Bootstrap和jQuery。见Github。为了测试，使用这个jsfiddle，因为github代码会改变，如果你想为自己的目的分叉它，我已经包含了它。

我已经修建了下面的逻辑代码：

1. 你想要多少牌可打挑选。
2. 卡片加载和随机化。每对具有相同的类别（卡片*和图形*）。
3. 你点击一张卡片，然后在另一张卡片上，如果他们匹配，他们会被丢弃，否则你会再次选择。

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

// 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); 
     } 
    }); 
}); 

注意的图标应该是白色的卡片，让他们灰色的，看那些女巫匹配，而不需要萤火虫的。如果你点击多于两张卡，你会看到问题所在（如果我没有解释清楚）。我尝试在每个语句的末尾添加单击解除绑定事件，但无法使其工作。

尽力而为！谢谢！

Answer 1

编辑：

我似乎误解了这个问题所以这里的我会怎样有这样的游戏。

首先，我想把我的卡有这样的结构：

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

我会用data-card-type比较两个卡是否是同一类型的

我将有一个全球性变量firstCard最初为空，如果为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

你可以使用'一个”（一次绑定事件）：

$("[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); 
    } 
}