Сравнение элементов в игре памяти

Это мои первые шаги с программированием в 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);
            }
        });
    }
})(); 

2 ответа

  1. После того, как сравнение было сделано, вы должны сбросить openдля того, чтобы сделать новое сравнение.

    После первого клика openустанавливается, например, » f1.формат PNG.» (кстати, imo, вы должны вернуться сюда).
    После второго щелчка, 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);
    }

  2. Я постараюсь описать, как я буду proceded

    1rst: можно использовать атрибут данных для более легкого управления DOM img
    2-й: сохранить значение данных в переменной при нажатии на изображение
    3-й: сравните, если вы второй нажмите совпадение с первой переменной

    так e.g :

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

    вы можете запустить этот exemple здесь

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