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

完成比较后，您必须重置open才能进行新的比较。

第一次点击后，open设置为，例如“f1.png”。（顺便说一下，你应该回到这里）。第二次点击后，open1设置为，例如“f2.png”。然后比较open !== open1会为您提供结果，但您永远不会将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); }

Answer 2

我将尝试描述我将如何进行

第一：您可以使用数据属性来操作更简单的dom img 第二步：单击图像时将数据值保存在变量中第3步：比较第二次点击是否与第一个变量相匹配

所以例如：

<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>

------------------- script ----------

 (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/

比较记忆游戏中的元素

2 个答案: