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