比較記憶遊戲中的元素

Question

這是我在js中編程的第一步。

我在內存遊戲比較元素有問題。

點擊後，代碼只有一個元素從第一次點擊進行比較，它會導致功能，並且不進一步元素，儘管收集到的值進行比較 -

例如：如果我點擊img與src="f1.png"，這只是比較與那個相同的元素src，不比較其他元素。這裏是f2.png （這可能會令人困惑，但我不知道如何最好地描述它）

請幫我解決這個問題。

HTML

<div class="c ef"> 
    <div class="f"></div> 
    <div class="b"><img src="f1.png" /></div> 
    </div> 

    <div class="c ef"> 
    <div class="f"></div> 
    <div class="b"><img src="f2.png" /></div> 
    </div> 

    <div class="c ef"> 
    <div class="f"></div> 
    <div class="b"><img src="f1.png" /></div> 
    </div> 

    <div class="c ef"> 
    <div class="f"></div> 
    <div class="b"><img src="f2.png" /></div> 
    </div> 

腳本比較了

(function() { 
    var open = ""; 
    var cards = $(".c.ef"); 
    for (var i = 0, len = cards.length; i < len; i++) { 
     var card = cards[i]; 
     clickListener(card); 
    } 

    function clickListener(card) { 
     card.addEventListener("click", function() { 
      var c = this.classList; 
      c.add("flip"); 
      var open1=""; 
      if(open == ""){ 
       open = $(".flip").contents().find("img").attr("src"); 
      }else{ 
       open1 = $(".flip").contents().find("img").attr("src"); 
      } 
      if(open !== open1){ 
       setTimeout(function(){ 
        c.remove("flip"); 
       }, 1200); 
      }else{ 
       setTimeout(function(){ 
        $(".flip").css("visibility", "hidden"); 
        c.remove("flip"); 
       }, 800); 
      } 
     }); 
    } 
})(); 

Answer 1

我會盡量describ我怎麼會proceded

1RST：您可以使用數據屬性的操作更容易的DOM img 第二步：在點擊圖片時將數據值保存在變量中 第三：比較一下如果第二次點擊匹配您的第一個變量

所以如：

<div class="c ef"> 
    <div class="f"></div> 
    <div class="b" data-img-value="1"><img src="f1.png" /></div> 
    </div> 

    <div class="c ef"> 
    <div class="f"></div> 
    <div class="b" data-img-value="2"><img src="f2.png" /></div> 
    </div> 

    <div class="c ef"> 
    <div class="f"></div> 
    <div class="b" data-img-value="1"><img src="f1.png" /></div> 
    </div> 

    <div class="c ef"> 
    <div class="f"></div> 
    <div class="b" data-img-value="2"><img src="f2.png" /></div> 
    </div> 

-------------------腳本----------

(function() { 
     var $card= $('.b'); 
     var $firstVal = null; 
     $card.on('click',function(){ 
     if($firstVal === null){ 
      $firstVal = $(this).first().attr('data-img-value'); 
     } 
     else{ 
     if($firstVal === $(this).first().attr('data-img-value')){ 
      //your code if pair match 
      console.log('pair founded') 
      $firstval = null; 
     } 
     else{ 
      //your code if not match 
      console.log('not pair') 

     } 
     } 

    }); 
})(); 

你可以在這裏運行

https://jsfiddle.net/a1na9hLe/5/

Answer 2

後，你必須爲了使新的比較重置open。

第一次點擊後，open被設置爲例如「f1.png」。 （順便說一句，伊莫，你應該回到這裏）。 第二次點擊後，open1被設置爲例如「f2.png」。 然後比較​​給你一個結果，但你永遠不會重置open回到""。 因此，對於第三次點擊，open已經被設置爲前一個值（「f1.png」），並且它將一次又一次地比較相同的事物。

TL; DR

這應該做的伎倆：

if(open !== open1){ setTimeout(function(){ c.remove("flip"); open = ''; }, 1200); }else{ setTimeout(function(){ $(".flip").css("visibility", "hidden"); c.remove("flip"); open = ''; }, 800); }