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