Question

我有一些运行一些转换的CSS ID，我希望这个转换运行的不仅仅是一个元素...我尝试将它们转换为类，但有些东西搞砸了，我不确定发生了什么。我的CSS ID看起来如何的一个例子：

#transition {}
#transition.flipped {}
#transition figure {}
#transition .front {}
#transition .back {}

如果我也改变它们

.transition {}
.flipped {}
.transition figure {}
.front {}
.back {}

我将javascript getElementbyId更改为getElementsByClassName。转换不起作用，JS控制台没有显示错误。

评论中的HTML

<div class="transition">
   <figure class="front">
      <img src="img/work/0002.png">
   </figure>
   <figure class="back">
      <img src="img/work/0007.png">
   </figure>
</div>

JS代码：

var init = function() {
    var trans = document.getElementsByClassName('transition');

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

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

Answer 1

因此，getElementsByClassName返回一个数组。如果需要，可以循环遍历该数组，但更简单的选择是包含jQuery。

首先，尽可能将其添加到您的html文件中：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

然后，在下面包含的单独脚本文件中，尝试这样的事情：

$(document).ready(function() {
    var trans = $('.transition');

    $('.flip').click(function() {
        trans.toggleClass('flipped');
    });
});

<强> Fiddle to demonstrate

Answer 2

getElementById返回单个DOM元素。

getElementsByClassName返回一个DOM元素数组。

您无法在阵列上设置事件;你需要在每个元素上单独设置它。

将几个CSS ID更改为类

2 个答案: