javascript - リスナーを介してアクティビティを変更するために、配列内の現在の dom 要素を参照する方法

Question

現在、私はすべての画像をループして、onmouseover/onmouseout イベントで画像を for ループで変更しています。

 var arrows = document.getElementsByClassName('arrow');

 for (var i = 0; i < arrows.length; i++) {
     arrows[i].onmouseover = arrows[i] + ".src = 'images/downarrow_hover.gif';";
     arrows[i].onmouseout = arrows[i] + ".src = 'images/downarrow.gif';";
 }

うまくいきません。私はこれを正しく行っていますか?

Answer 1

と に機能を割り当てる必要がonmouseoverありonmouseoutます。

var arrows = document.getElementsByClassName('arrow');

for (var i = 0; i < arrows.length; i++) {
    arrows[i].onmouseover = function () {
        this.src = 'images/downarrow_hover.gif';
    };

    arrows[i].onmouseover = function () {
        this.src = 'images/downarrow.gif';
    };

その価値と余裕がある場合は、そのようなことを簡単に行うことができるjQueryを検討する必要があります。

$('.arrow').hover(
    function () { $(this).attr('src', 'images/downarrow_hover.gif'); },
    function () { $(this).attr('src', 'images/downarrow.gif'); });