CSS/JavaScriptの複数のカードフリップ：他のカード

Question

をリセット

だから私は現在、使用しています。この1：今、私は一枚のカードを反転するとき、別のを反転して（どちら問題ではない）ということで必要なものhttp://jsfiddle.net/nawdpj5j/10/

1つは最初にリセットされ/戻されます。

私はここで何かを追加する必要があると思う：

var init = function() { 
var flippers = document.getElementsByClassName("flip"); 

for(i = 0; i < flippers.length; i++){ 
    flippers[i].addEventListener('click', function(){ 
     var cardID = this.dataset.targetid; 
     var card = document.getElementById(cardID); 
     card.toggleClassName('flipped'); 
}, false); 
} 


}; 

は、事前にありがとうございます！

Answer 1

すべての裏返しのカードの配列を取得し、カードはそのように反転されるたびにそれらをバック反転させることができ：ここでは

var init = function() { 
    var flippers = document.getElementsByClassName("flip"); 
    for (i = 0; i < flippers.length; i++) { 
     flippers[i].addEventListener('click', function() { 
      var cardID = this.dataset.targetid; 
      var card = document.getElementById(cardID); 
      var flipped = document.getElementsByClassName('flipped'); 
      for (i = 0; i < flipped.length; i++) { 
       if (card !== flipped[i]) { 
        flipped[i].toggleClassName('flipped'); 
       } 
      } 
      card.toggleClassName('flipped'); 
     }, false); 
    } 
}; 
window.addEventListener('DOMContentLoaded', init, false); 

は、作業のデモへのリンクがJS FIDDLE