javascript - 使用getElementByClass进行多卡翻转

我在多个div上使用CSS3和javascript进行卡片翻转。我正在使用desssandro的3d卡翻转功能，但他只使用一个ID，因此一次使用一个div。我要翻页的卡片有几张。我该怎么做？

这是德桑德罗的剧本和小提琴

http://jsfiddle.net/vanduzled/nawdpj5j/

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

如果我将divs设为类而不是id，则下面的脚本不起作用：

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

编辑

我创建了小提琴副类名，但是它不起作用

http://jsfiddle.net/vanduzled/omLac95t/

最佳答案

试试这个http://jsfiddle.net/nawdpj5j/6/，我将样式留给您。 getElementsByClassName返回一个数组，因此您需要遍历数组中的元素并在每个元素上调用toggleClassName。我还修改了CSS，将#card替换为.card

var init = function() {
  var cards = document.getElementsByClassName("card");
  document.getElementById('flip').addEventListener( 'click', function(){
      for (i = 0; i < cards.length; i++){
         cards[i].toggleClassName('flipped');
      }
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

更新：

见http://jsfiddle.net/nawdpj5j/10/

将data-targetid添加到翻转按钮：

<button class="flip" data-targetid="card">Flip Card</button>

获取所有翻转项并找到要从按钮数据集中翻转的按钮：

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);
    }
};

关于javascript - 使用getElementByClass进行多卡翻转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26901011/