Maison >interface Web >js tutoriel >Une brève discussion sur JavaScript pour la fermeture de boucle
Un internaute a posé une question, pourquoi la sortie html suivante est-elle toujours 5, au lieu de cliquer sur chaque p, le 1, 2, 3, 4, 5 correspondant sera alerté.
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript"> function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = function() { alert(i); } } } </script> </head> <body onload="init();"> <p>产品一</p> <p>产品二</p> <p>产品三</p> <p>产品四</p> <p>产品五</p> </body> </html>
Il existe plusieurs solutions :
1. Enregistrez la variable i sur chaque objet paragraphe (p)
function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].i = i; pAry[i].onclick = function() { alert(this.i); } } }
2. Enregistrez la variable i dans la fonction anonyme elle-même
function init2() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (pAry[i].onclick = function() { alert(arguments.callee.i); }).i = i; } }
3. Ajoutez une couche de fermeture et transmettez i à la couche interne sous forme de fonction. paramètres Fonction
function init3() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (function(arg){ pAry[i].onclick = function() { alert(arg); }; })(i);//调用时参数 } }
4. Ajouter une couche de fermeture, et passer i à la fonction mémoire sous la forme d'une variable locale
function init4() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (function () { var temp = i;//调用时局部变量 pAry[i].onclick = function() { alert(temp); } })(); } }
5. Ajoutez une couche de fermeture et renvoyez une fonction en tant qu'événement de réponse (notez la différence subtile avec 3)
function init5() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = function(arg) { return function() {//返回一个函数 alert(arg); } }(i); } }
6. Utilisez la fonction pour implémenter, En fait, chaque fois qu'une instance de fonction est générée, une fermeture sera générée
function init6() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例 } }
7. Utilisez la fonction pour implémenter. différence par rapport à 6
function init7() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = Function('alert('+i+')') } }
Ce qui précède est l'intégralité du contenu de la brève discussion sur JavaScript pour la fermeture de boucle présentée par l'éditeur. J'espère que vous visiterez le site Web PHP chinois ~.
Pour plus d'articles liés à la brève discussion sur JavaScript pour la fermeture de boucle, veuillez visiter le site Web Follow PHP Chinese !