如何通过监听器引用数组中当前的 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'); });