2016-09-29 60 views
0

這是我在js中編程的第一步。比較記憶遊戲中的元素

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

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

例如:如果我點擊imgsrc="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); 
      } 
     }); 
    } 
})(); 
+0

本例什麼是你想怎麼辦? –

+0

我試着比較第一個元素與第二個元素後點擊div與img,如果相同的變化能見度隱藏其他比較下兩個元素 –

回答

0

我會盡量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/

0

後,你必須爲了使新的比較重置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); }

+0

它是更好的,但只隱藏第二個點擊的元素, 第一個保持可見 –

+0

這是因爲你'重新做這個:'c.remove(「flip」);',而'c'是最後點擊的元素。你應該重新查詢翻轉的元素或其他東西。 – ezakto