Я пытаюсь получить индекс элемента во время onmouseover.
Я могу сделать это легко с 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>
0
Barlas Apaydin 22 Янв 2013 в 02:19

3 ответа

Лучший ответ

Это потому, что i уже был переопределен, сохраните его в атрибуте:

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

DEMO

Или используйте закрытие:

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

DEMO

2
gdoron is supporting Monica 21 Янв 2013 в 22:28

Используйте непосредственную функцию, чтобы зафиксировать значение i для текущей итерации:

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

Вот обновленная скрипка.

4
Sebastian vom Meer 21 Янв 2013 в 22:23

Попробуй это:

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);
}
1
0x499602D2 21 Янв 2013 в 22:21