css/javascript多卡翻转：重置其他卡

Question

所以我目前正在使用这个：http://jsfiddle.net/nawdpj5j/10/

现在我需要的是，当我翻转一张牌（无论是哪张）然后再翻转另一张时，第一张牌会重置/返回。

我想我需要在这里添加一些东西：

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