0

画像要素の長いリストがあり、それぞれに独自の ID があります。1つの画像をクリックすると、クラス「foo」が切り替わるように、すでに設定しています。私がやりたいのは、別の画像をクリックすると、最初の画像のクラス「foo」が削除されるように設定することです。可能であれば、純粋な JavaScript でこれを行いたいと思います。ありがとう。

ここにフィドルがあります：http://jsfiddle.net/q3aRC/

function clicked($id) {
    document.getElementById($id).classList.toggle('foo');
}
4

3 に答える 3

2

あなたはすでに を使用しているので、classList十分に新しいブラウザに対応しているだけだと思います。そのためaddEventListener()、すべてのonclick属性を削除して、次のようにすることをお勧めします。

document.addEventListener('click',function(e){
    if (e.target.tagName === "IMG") {
        var imgs = document.getElementsByTagName('IMG');
        for (var i = 0; i < imgs.length; i++)
            if (imgs[i] != e.target)
                imgs[i].classList.remove('foo');

        e.target.classList.toggle('foo');
    }
}, false);

デモ: http://jsfiddle.net/q3aRC/3/

つまり、単一のクリック ハンドラーをドキュメントにバインドし (または、画像が共通の親を共有している場合は、画像の親要素にバインドできます)、クリックしたアイテムが関心のある要素の 1 つであるかどうかをテストします (つまり、 、img) そしてそこから... JS はほぼ同じ長さになりますが、html は短くてきれいになります。id元の関数以外に使用していない場合は、実際に属性も削除できclicked()ます。

以前getElementsByTagName()は、さらに別の方法を示しただけでしたが、(他の回答のように) getElementsByClassName()orquerySelectorAll()の方がおそらくより良いオプションです。しかし、これは簡単に切り替えることができます。

于 2013-06-23T21:41:26.250 に答える