<textarea id="runcode59818"><ptml> <pead> <title></title> <script type= "Text/javascript" > <!--function $ (E Lem) {return document.getElementById (elem); function tag (Name,elem) {return (elem| | Document). getElementsByTagName (name); function init () {var div=tag ("div"); for (Var i=0;i<div.length;i++) {div[i].onclick=function () {alert (i); }}//--> </script> </pead> <body> <div id= "div" >0</div> <div id= "Div1" &G t;1</div> <div id= "Div2" >2</div> <div id= "Div3" >3</div> <div id= "Div4" >4</div > <div id= "div5" >5</div> <div id= "div6" >6</div> <input type= "button" value= "click" Oncl ick= "Init ();" > </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The previous code is meant to add an event on each Div, that is, whenever you click on a div, the corresponding ordinal of this div is displayed. But when we run the program we find that no matter what you click on it, it will only show 7. --that's the problem with closures.
Originally in JS, function in the definition function, there is a closure. In this case, the variables in the outer function can be used in the inner function, even if the outer function ends. But when there is a loop in the outer layer, if the loop variable is used in the inner function, the final value of the variable is referenced directly.
Just like the code above shows.
How to solve it.
You can use anonymous functions to resolve them. The anonymous function is used to brake execution, and we can use this feature to produce a scope, a variable of life, to refer to the outer loop variable.
As shown in the code:
<textarea id="runcode51532"><ptml> <pead> <title></title> <script type= "text/javascript" ><!--function $ (el EM) {return document.getElementById (elem); function tag (Name,elem) {return (elem| | Document). getElementsByTagName (name); function init () {var div=tag ("div"); for (Var i=0;i<div.length;i++) {(function () {var temp=i; Div[temp].onclick=function () {alert (temp); }} ()}//--></script> </pead> <body> <div id= "div" >0</div> <div id= "D Iv1 ">1</div> <div id=" Div2 ">2</div> <div id=" Div3 ">3</div> <div id=" Div4 ">4& lt;/div> <div id= "div5" >5</div> <div id= "div6" >6</div> <input type= "button" value= "clic K "onclick=" Init (); > </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
As long as the loop variable in the inner function is the final value, so we use the anonymous function to stimulate a scope, before entering the inner loop, there is another variable to obtain the value of the loop variable, this idea is to deal with the essence of the closure problem.
The following example: There is no obvious for loop at this time, but according to the above idea, you can solve the problem immediately
<textarea id="runcode29506"><ptml> <pead> <title> </title> <script type= "text/javascript" ><!--function $ (E Lem) {return document.getElementById (elem); } var id=0; function Adddiv () {var text= "testtestetsetstsetstst"; var div=$ ("div"); var divchild=document.createelement ("div"); Div.appendchild (Divchild); Divchild.id= "Div" +id; Divchild.innerhtml= "<input type= ' text ' id= ' Row" +id+ "' >" +text; Divchild.onclick=function () {Alert ("row" +id); $ ("Row" +id). Value=text; } id++; }//--></script> </pead> <body> <div id= "div" > </div> <input type= "button" Val Ue= "click" onclick= "Adddiv ();" > </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Post-resolution code:
<textarea id="runcode69027"><ptml> <pead> <title> </title> <script type= "text/javascript" ><!--function $ (E Lem) {return document.getElementById (elem); } var id=0; function Adddiv () {var text= "testtestetsetstsetstst"; var div=$ ("div"); var divchild=document.createelement ("div"); Div.appendchild (Divchild); Divchild.id= "Div" +id; Divchild.innerhtml= "<input type= ' text ' id= ' Row" +id+ "' >" +text; (function () {var d=id; Divchild.onclick=function () {Alert ("row" +d); $ ("Row" +d). Value=text; }) () id++; }//--></script> </pead> <body> <div id= "div" > </div> <input type= "button" Val Ue= "click" onclick= "Adddiv ();" > </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Add: See a netizen to solve the problem like this:
<textarea id="runcode50464"><ptml> <pead> <title> </title> <script type= "text/javascript" ><!--function $ (E Lem) {return document.getElementById (elem); } var id=0; function Adddiv () {var text= "testtestetsetstsetstst"; var div=$ ("div"); var divchild=document.createelement ("div"); Div.appendchild (Divchild); Divchild.id= "Div" +id; Divchild.innerhtml= "<input type= ' text ' id= ' row '" +id+ ">" +text; Divchild.onclick=function (f) {return function () {alert (f); }} (ID) id++; }//--></script> </pead> <body> <div id= "div" > </div> <input type= "button" Val Ue= "click" onclick= "Adddiv ();" > </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
My personal understanding is to assign the ID to f,f as an inner loop parameter before entering the inner loop, and the idea should be the same.
