0

いくつかのトランジションを実行するいくつかの CSS ID があります。このトランジションで複数の要素を実行したいのですが、それらをクラスに変換しようとしましたが、何かがうまくいかず、何が起こっているのかわかりません。私のCSS IDがどのように見えるかの例:

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

私もそれらを変更する場合

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

JavaScriptgetElementbyIdをに変更し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);
4

2 に答える 2

0

したがって、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');
    });
});

実演するためのフィドル

于 2013-05-10T20:45:30.847 に答える
0

getElementById単一の DOM 要素を返します。

getElementsByClassNameDOM 要素の配列を返します。

配列にイベントを設定することはできません。各要素に個別に設定する必要があります。

于 2013-05-10T20:45:44.560 に答える