Une brève discussion sur JavaScript pour la fermeture de boucle-js tutoriel-php.cn

Une brève discussion sur JavaScript pour la fermeture de boucle

高洛峰

Libérer： 2017-01-20 13:29:27

original

943 Les gens l'ont consulté

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>

Copier après la connexion

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);  
   }  
 }  
}

Copier après la connexion

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;  
 }  
}

Copier après la connexion

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);//调用时参数  
 }  
}

Copier après la connexion

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);   
   }  
  })();  
 }  
}

Copier après la connexion

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);  
 }  
}

Copier après la connexion

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一次就产生一个函数实例 
  }  
}

Copier après la connexion

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(&#39;alert(&#39;+i+&#39;)&#39;) 
  }  
}

Copier après la connexion

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 !