javascript - 将几个 CSS Id 更改为类

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

小提琴演示

Answer 2

getElementById返回单个 DOM 元素。

getElementsByClassName返回一个 DOM 元素数组。

您不能在数组上设置事件；您需要在每个元素上单独设置它。