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

的链接

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

1 个答案: