使用getElelementsByClass进行多卡翻转

Question

我在多个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/

Answer 1

试试这个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);
    }
};

Answer 2

有几个问题：

1. click事件将添加到按钮，因此应为getElementsById('flip') 。
2. 检索卡应该是getElementsByClassName或者可以使用jQuery的$('.card') 。
3. HTML和CSS是为单个卡编写的。

---

var init = function() {
    var cards = $('.card');

    document.getElementById('flip').addEventListener( 'click', function(){
        $.each(cards, function( key, value ) {      
            value.toggleClassName('flipped');
        });
    }, false);
};

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

这是适用于多张卡的解决方案： http : //jsfiddle.net/pwee167/nawdpj5j/7/

Answer 3

您可以查看该问题的最佳解决方案。

答案基本上是将getElementByClassName()的返回值分配给一个数组，然后遍历它。 当应用于您的问题时，它可能看起来像这样：

另外， 工作JSfiddle 。

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

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

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