Question

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

这是desandro的剧本和小提琴

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

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

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

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

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

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

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

修改的

我创建了一个小提琴byclassname，但它不起作用

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

有几个问题：

click事件正在添加到按钮中，因此它应为getElementsById('flip')。
检索卡片应为getElementsByClassName，或者您可以使用jQuery的$('.card')。
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

您可以查看this question的顶级解决方案。

答案基本上将getElementByClassName()的返回值赋给数组然后遍历它。当应用于您的问题时，它可能如下所示：

另外，Working 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);

使用getElementByClass进行多卡翻转

3 个答案: