Heim > Artikel > Web-Frontend > Eine kurze Diskussion über JavaScript zum Schließen von Schleifen

Eine kurze Diskussion über JavaScript zum Schließen von Schleifen

高洛峰Original: 2017-01-20 13:29:27939Durchsuche

Ein Internetnutzer hat eine Frage gestellt: Warum gibt der folgende HTML-Code jedes Mal 5 aus? Anstatt auf jedes p zu klicken, werden die entsprechenden 1, 2, 3, 4, 5 benachrichtigt.

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

Es gibt mehrere Lösungen:

1. Speichern Sie die Variable i auf jedem Absatzobjekt (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. Speichern Sie die Variable i in der anonymen Funktion selbst

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. Fügen Sie eine Abschlussschicht hinzu und übergeben Sie i in Form einer Funktion Parameter Funktion

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. Fügen Sie eine Abschlussebene hinzu und übergeben Sie i in Form einer lokalen Variablen an die Speicherfunktion

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. Fügen Sie eine Abschlussebene hinzu und geben Sie eine Funktion als Antwortereignis zurück (beachten Sie den subtilen Unterschied zu 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. Verwenden Sie die Funktion zum Implementieren. Tatsächlich wird jedes Mal, wenn eine Funktionsinstanz generiert wird, ein Abschluss generiert

function init6() {  
  var pAry = document.getElementsByTagName("p");  
  for( var i=0; i<pAry.length; i++ ) {   
   pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例 
  }  
}

7. Verwenden Sie die Funktion zum Implementieren Unterschied zu 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;) 
  }  
}

Das Obige ist der gesamte Inhalt der kurzen Diskussion über JavaScript für den Schleifenschluss, die Ihnen der Herausgeber präsentiert hat. Ich hoffe, Sie besuchen die chinesische PHP-Website

Weitere Artikel zur kurzen Diskussion von JavaScript für den Schleifenschluss finden Sie auf der chinesischen Website von Follow PHP!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung zum Schreiben und Funktionieren von Abschlüssen in JavaScriptNächster Artikel：Ausführliche Erklärung zum Schreiben und Funktionieren von Abschlüssen in JavaScript

In Verbindung stehende Artikel

Mehr sehen