The example in this article describes how JavaScript uses a for-loop batch registration event that does not correctly get indexed values. Share to everyone for your reference. The specific analysis is as follows:
Many friends may encounter a problem, that is, when you use the For Loop batch registration event handler, and then finally through the event handler to get the current element index value will fail, first look at a piece of code example:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<style type= "Text/css" >
li{
width:240px;
Overflow:hidden;
Text-overflow:ellipsis;
White-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var olis=document.getelementsbytagname ("Li");
var Oshow=document.getelementbyid ("show");
for (Var index=0;index<olis.length;index++) {
Olis[index].onclick=function () {
Oshow.innerhtml=index;
}
}
}
</script>
<body>
<div id= "Show" ></div>
<ul>
<li> only by working hard will there be a better tomorrow. </li>
<li> Sharing Mutual assistance is the most important source of progress. </li>
<li> every day is new, cherish it well. </li>
<li> no one is a master in the beginning, only efforts to grow up the possibility of </li>
<li> only the time is precious, the next second is illusory </li>
</ul>
</body>
In the above code, when you click on the LI element when the pop-up value is always four, our original idea is, click the Li element in the div to display the current index of LI elements, the following simple analysis of the reasons. The reason is very simple, when the For loop execution, the value of index has changed to four, so there is the phenomenon above.
The code is modified as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<style type= "Text/css" >
li{
width:240px;
Overflow:hidden;
Text-overflow:ellipsis;
White-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var olis=document.getelementsbytagname ("Li");
var Oshow=document.getelementbyid ("show");
for (Var index=0;index<olis.length;index++) {
Olis[index]._index=index;
Olis[index].onclick=function () {
Oshow.innerhtml=this._index;
}
}
}
</script>
<body>
<div id= "Show" ></div>
<ul>
<li> only by working hard will there be a better tomorrow. </li>
<li> Sharing Mutual assistance is the most important source of progress. </li>
<li> every day is new, cherish it well. </li>
<li> no one is a master in the beginning, only efforts to grow up the possibility of </li>
<li> only the time is precious, the next second is illusory </li>
</ul>
</body>
The code above implements our requirements, and of course we can use closures as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<style type= "Text/css" >
li{
width:240px;
Overflow:hidden;
Text-overflow:ellipsis;
White-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var olis=document.getelementsbytagname ("Li");
var Oshow=document.getelementbyid ("show");
for (Var index=0;index<olis.length;index++) {
(function (index) {
Olis[index].onclick=function () {
Oshow.innerhtml=index;
}
}) (Index)
}
}
</script>
<body>
<div id= "Show" ></div>
<ul>
<li> only by working hard will there be a better tomorrow. </li>
<li> Sharing Mutual assistance is the most important source of progress. </li>
<li> every day is new, cherish it well. </li>
<li> no one is a master in the beginning, only efforts to grow up the possibility of </li>
<li> only the time is precious, the next second is illusory </li>
</ul>
</body>
I hope this article will help you with your JavaScript based web design.
