Dieser Artikel beschreibt die Lösung für die Tatsache, dass Ereignisse, die in JavaScript für Loop -Stapel registriert sind, Indexwerte nicht korrekt erhalten können. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Viele Freunde können auf ein Problem stoßen, dh bei der Verwendung von A for Loop zum Stapelregister der Ereignisverarbeitungsfunktion und dann schließlich den Indexwert des aktuellen Elements über die Ereignisverarbeitungsfunktion abzusagen, wird dies fehlschlägt. Schauen wir uns zuerst ein Code -Beispiel an:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<meta name = "Autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Breite: 240px;
Überlauf: versteckt;
Text-Overflow: Ellipsis;
weißer Raum: Nowrap;
Schriftgröße: 12px;
Höhe: 30px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var olis = document.getElementsByTagName ("li");
var show = document.getElementById ("show");
für (var index = 0; index <olis.length; index ++) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
}
}
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> Nur wenn man hart arbeitet, kann es ein besseres Morgen geben. </li>
<li> Teilen und gegenseitige Unterstützung ist die größte treibende Kraft für den Fortschritt. </li>
<li> Jeder Tag ist neu, schätze es. </li>
<li> Niemand ist von Anfang an ein Meister, nur wenn Sie hart arbeiten können, können Sie </li> wachsen.
<li> Nur die gegenwärtige Zeit ist kostbar, die nächste Sekunde ist illusorisch </li>
</ul>
</body>
</html>
Im obigen Code beträgt der Popup-Wert beim Klicken auf das LI-Element immer vier. Unsere ursprüngliche Idee ist es, auf das LI -Element zu klicken, um den Indexwert des aktuellen Li -Elements im DIV anzuzeigen. Lassen Sie uns kurz die folgenden Gründe analysieren. Der Grund ist sehr einfach. Nach der Ausführung der für die für die Schleife ausgeführte Indexwert hat sich der Indexwert auf vier geändert, sodass das obige Phänomen auftritt.
Der Code wird wie folgt geändert:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<meta name = "Autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Breite: 240px;
Überlauf: versteckt;
Text-Overflow: Ellipsis;
weißer Raum: Nowrap;
Schriftgröße: 12px;
Höhe: 30px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var olis = document.getElementsByTagName ("li");
var show = document.getElementById ("show");
für (var index = 0; index <olis.length; index ++) {
olis [index] ._ index = index;
olis [index] .onclick = function () {
show.innerhtml = this._index;
}
}
}
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> Nur wenn man hart arbeitet, kann es ein besseres Morgen geben. </li>
<li> Teilen und gegenseitige Unterstützung ist die größte treibende Kraft für den Fortschritt. </li>
<li> Jeder Tag ist neu, schätze es. </li>
<li> Niemand ist von Anfang an ein Meister, nur wenn Sie hart arbeiten können, können Sie </li> wachsen.
<li> Nur die gegenwärtige Zeit ist kostbar, die nächste Sekunde ist illusorisch </li>
</ul>
</body>
</html>
Der obige Code implementiert unsere Anforderungen, und natürlich können Sie auch Schließungen verwenden. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<meta name = "Autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Breite: 240px;
Überlauf: versteckt;
Text-Overflow: Ellipsis;
weißer Raum: Nowrap;
Schriftgröße: 12px;
Höhe: 30px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var olis = document.getElementsByTagName ("li");
var show = document.getElementById ("show");
für (var index = 0; index <olis.length; index ++) {
(Funktion (Index) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
})(Index)
}
}
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> Nur wenn man hart arbeitet, kann es ein besseres Morgen geben. </li>
<li> Teilen und gegenseitige Unterstützung ist die größte treibende Kraft für den Fortschritt. </li>
<li> Jeder Tag ist neu, schätze es. </li>
<li> Niemand ist von Anfang an ein Meister, nur wenn Sie hart arbeiten können, können Sie </li> wachsen.
<li> Nur die gegenwärtige Zeit ist kostbar, die nächste Sekunde ist illusorisch </li>
</ul>
</body>
</html>
Ich hoffe, dass die Beschreibung in diesem Artikel basierend auf JavaScript für die Webprogrammierung aller hilfreich ist.