Un internaute a posé une question, comme indiqué dans le HTML suivant, pourquoi chaque sortie est-elle 5, au lieu de cliquer sur chaque P, vous alerte les 1, 2, 3, 4, 5 correspondants.
<Html> <A-the-head> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> Démo de clôture </ title> <script type = "text / javascript"> function init () {var pary = document.getElelementsByTagname ("p"); pour (var i = 0; i <Pary.length; i ++) {Pary [i] .OnClick = function () {alert (i); }}} </ script> </ head> <body onload = "init ();"> <p> Product 1 </p> <p> Product 2 </p> <p> Product 3 </p> <p> Product 4 </p> <p> Product 5 </p> </ body> </html>Il y a plusieurs solutions
1. Enregistrer la variable I à chaque objet de paragraphe (P)
function init () {var Pary = document.getElementsByTagName ("p"); pour (var i = 0; i <Pary.length; i ++) {Pary [i] .i = i; Pary [i] .onclick = function () {alert (this.i); }}}2. Enregistrer la variable I dans la fonction anonyme elle-même
fonction init2 () {var Pary = document.getElementsByTagName ("p"); pour (var i = 0; i <Pary.length; i ++) {(Pary [i] .OnClick = function () {alert (arguments.callee.i);}). i = i; }}3. Ajoutez une couche de fermeture, et I est transmis à la fonction intérieure sous forme de paramètres de fonction.
fonction init3 () {var Pary = document.getElementsByTagName ("p"); for (var i = 0; i <Pary.length; i ++) {(function (arg) {Pary [i] .OnClick = function () {alert (arg);};}) (i); // arguments lorsque l'appel}}}4. Ajouter une couche de fermeture, et I est transmis à la fonction de mémoire sous la forme d'une variable locale
fonction init4 () {var Pary = document.getElementsByTagName ("p"); pour (var i = 0; i <Pary.length; i ++) {(function () {var temp = i; // Pary variable locale [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 par rapport à 3)
fonction init5 () {var Pary = document.getElementsByTagName ("p"); for (var i = 0; i <pary.length; i ++) {pary [i] .onclick = function (arg) {return function () {// return a function alert (arg); } }(je); }}6. Implémenté avec la fonction, en fait, chaque fois qu'une instance de fonction est générée, une fermeture sera générée.
fonction init6 () {var Pary = document.getElementsByTagName ("p"); for (var i = 0; i <pary.length; i ++) {pary [i] .onclick = new function ("alert (" + i + ");"); // ne génère une instance de fonction à un moment}}7. Utilisez la fonction pour la mettre en œuvre, faites attention à la différence entre 6
fonction init7 () {var Pary = document.getElementsByTagName ("p"); pour (var i = 0; i <Pary.length; i ++) {Pary [i] .OnClick = function ('alert (' + i + ')')}}Ce qui précède est la brève discussion sur le javascript pour la fermeture de boucle que l'éditeur vous apporte. J'espère que tout le monde soutiendra Wulin.com plus ~