Este artigo descreve a solução para o fato de que os eventos registrados no JavaScript usando o loop loop não podem obter corretamente os valores do índice. Compartilhe para sua referência. A análise específica é a seguinte:
Muitos amigos podem encontrar um problema, ou seja, ao usar um loop para registrar a função de processamento de eventos e, finalmente, obter o valor do índice do elemento atual através da função de processamento de eventos, ele falhará. Vejamos um exemplo de código primeiro:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Largura: 240px;
estouro: oculto;
Fluxo de text-overflow: elipsis;
Espaço branco: Nowrap;
tamanho de fonte: 12px;
Altura: 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 [índice] .OnClick = function () {
show.innerhtml = index;
}
}
}
</script>
</head>
<Body>
<div id = "show"> </div>
<ul>
<li> Somente trabalhando duro pode haver um amanhã melhor. </li>
<li> Compartilhar e assistência mútua é a maior força motriz para o progresso. </li>
<li> Todo dia é novo, aprecie -o. </li>
<li> Ninguém é um mestre desde o início, apenas trabalhando duro, você pode crescer </li>
<li> Somente o tempo presente é precioso, o segundo segundo é ilusório </li>
</ul>
</body>
</html>
No código acima, ao clicar no elemento LI, o valor pop-up é sempre quatro. Nossa idéia original é clicar no elemento LI para exibir o valor do índice do elemento LI atual no div. Vamos analisar brevemente os motivos abaixo. O motivo é muito simples. Após a execução do loop for, o valor do índice mudou para quatro, portanto o fenômeno acima ocorre.
O código é modificado da seguinte forma:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Largura: 240px;
estouro: oculto;
Fluxo de text-overflow: elipsis;
Espaço branco: Nowrap;
tamanho de fonte: 12px;
Altura: 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 [índice] .OnClick = function () {
show.innerhtml = this._index;
}
}
}
</script>
</head>
<Body>
<div id = "show"> </div>
<ul>
<li> Somente trabalhando duro pode haver um amanhã melhor. </li>
<li> Compartilhar e assistência mútua é a maior força motriz para o progresso. </li>
<li> Todo dia é novo, aprecie -o. </li>
<li> Ninguém é um mestre desde o início, apenas trabalhando duro, você pode crescer </li>
<li> Somente o tempo presente é precioso, o segundo segundo é ilusório </li>
</ul>
</body>
</html>
O código acima implementa nossos requisitos e, é claro, você também pode usar o fechamento. O código é o seguinte:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Largura: 240px;
estouro: oculto;
Fluxo de text-overflow: elipsis;
Espaço branco: Nowrap;
tamanho de fonte: 12px;
Altura: 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 [índice] .OnClick = function () {
show.innerhtml = index;
}
})(índice)
}
}
</script>
</head>
<Body>
<div id = "show"> </div>
<ul>
<li> Somente trabalhando duro pode haver um amanhã melhor. </li>
<li> Compartilhar e assistência mútua é a maior força motriz para o progresso. </li>
<li> Todo dia é novo, aprecie -o. </li>
<li> Ninguém é um mestre desde o início, apenas trabalhando duro, você pode crescer </li>
<li> Somente o tempo presente é precioso, o segundo segundo é ilusório </li>
</ul>
</body>
</html>
Espero que a descrição deste artigo seja útil para a programação da Web de todos com base no JavaScript.