如何在鼠标悬停时获取元素的索引值

How to get index value of an element while onmouseover?

本文关键字：获取 元素 索引值 悬停 鼠标      更新时间：2023-09-26

我试图在鼠标悬停时获取元素的索引号。
我可以用jQuery轻松做到这一点，但原生javascript是防弹的/：

这是jsFiddle 

var ele = document.getElementsByClassName('sample')[0];
for(i=0; i<ele.children.length;i++){
    ele.children[i].onmouseover = function() {
        this.style.background='red';
        alert(i);//can't get the value
    }
}
<ul class="sample">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

使用即时函数来修复当前迭代的 i 值：

for(i=0; i<ele.children.length;i++){
    (function(i) {
        ele.children[i].onmouseover = function() {
            this.style.background='red';
            alert(i);
        }
    }(i));
}

这是一个更新的小提琴。

那是

因为i已经被覆盖了，请将其存储在属性中：

ele.children[i].onmouseover = function() {
    this.style.background='red';
    alert(this.getAttribute('data-index'));
};
ele.children[i].setAttribute('data-index', i);

演示

或使用闭合：

ele.children[i].onmouseover = (function (index) {
    return function () {
        this.style.background = 'red';
        alert(index);
    };
}(i));

演示

试试这个：

function callback(i) {
    return function() {
        this.style.background = "red";
        alert(i);
    };
}
for (var i = 0; i < ele.children.length; i++) {
    ele.children[i].onmouseover = callback(i);
}
相关文章：