比较记忆游戏中的元素

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