В этой статье описывается решение о том, что события, зарегистрированные в JavaScript, с использованием для партии цикла не могут правильно получить значения индекса. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Многие друзья могут столкнуться с проблемой, то есть при использовании For Loop для пакетного регистрации функции обработки событий, а затем, наконец, получить значение индекса текущего элемента через функцию обработки событий, она потерпит неудачу. Сначала посмотрим на пример кода:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<стиль типа = "text/css">
li {
Ширина: 240px;
переполнение: скрыто;
Текст-переполнение: ellipsis;
Белое пространство: Nowrap;
размер шрифта: 12px;
Высота: 30px;
}
</style>
<script type = "text/javascript">
window.onload = function () {
var olis = document.getElementsbytagname ("li");
var show = document.getElementbyId ("show");
for (var index = 0; index <olis.length; index ++) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
}
}
</script>
</head>
<тело>
<div id = "show"> </div>
<ul>
<li> Только, работая усердно, может ли завтра лучше. </li>
<li> Обмен и взаимная помощь - самая большая движущая сила для прогресса. </li>
<li> Каждый день новый, дорожить этим. </li>
<li> Никто не является мастером с самого начала, только усердно работая, вы можете вырасти </li>
<li> Только настоящее время драгоценное, следующая секунда - иллюзорная </li>
</ul>
</body>
</html>
В приведенном выше коде, нажав на элемент LI, всплывающее значение всегда четыре. Наша первоначальная идея - нажать на элемент LI, чтобы отобразить значение индекса текущего элемента LI в Div. Давайте кратко проанализируем причины ниже. Причина очень проста. После выполнения цикла FO, значение индекса изменилось до четырех, поэтому происходит вышеуказанное явление.
Код изменен следующим образом:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<стиль типа = "text/css">
li {
Ширина: 240px;
переполнение: скрыто;
Текст-переполнение: ellipsis;
Белое пространство: Nowrap;
размер шрифта: 12px;
Высота: 30px;
}
</style>
<script type = "text/javascript">
window.onload = function () {
var olis = document.getElementsbytagname ("li");
var show = document.getElementbyId ("show");
for (var index = 0; index <olis.length; index ++) {
Olis [index] ._ index = index;
olis [index] .onclick = function () {
show.innerhtml = this._index;
}
}
}
</script>
</head>
<тело>
<div id = "show"> </div>
<ul>
<li> Только, работая усердно, может ли завтра лучше. </li>
<li> Обмен и взаимная помощь - самая большая движущая сила для прогресса. </li>
<li> Каждый день новый, дорожить этим. </li>
<li> Никто не является мастером с самого начала, только усердно работая, вы можете вырасти </li>
<li> Только настоящее время драгоценное, следующая секунда - иллюзорная </li>
</ul>
</body>
</html>
Приведенный выше код реализует наши требования, и, конечно, вы также можете использовать закрытие. Код заключается в следующем:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<стиль типа = "text/css">
li {
Ширина: 240px;
переполнение: скрыто;
Текст-переполнение: ellipsis;
Белое пространство: Nowrap;
размер шрифта: 12px;
Высота: 30px;
}
</style>
<script type = "text/javascript">
window.onload = function () {
var olis = document.getElementsbytagname ("li");
var show = document.getElementbyId ("show");
for (var index = 0; index <olis.length; index ++) {
(function (index) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
}) (Индекс)
}
}
</script>
</head>
<тело>
<div id = "show"> </div>
<ul>
<li> Только, работая усердно, может ли завтра лучше. </li>
<li> Обмен и взаимная помощь - самая большая движущая сила для прогресса. </li>
<li> Каждый день новый, дорожить этим. </li>
<li> Никто не является мастером с самого начала, только усердно работая, вы можете вырасти </li>
<li> Только настоящее время драгоценное, следующая секунда - иллюзорная </li>
</ul>
</body>
</html>
Я надеюсь, что описание в этой статье будет полезно для каждого веб -программирования на основе JavaScript.