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