JQuery erstellen "Array" von .click Funktionen

Question

Ich habe eine Reihe von div-Tags:

<div id="div_01">ASD</div> 
<div id="div_02">ASD</div> 
<div id="div_03">ASD</div> 

Ich möchte eine Reihe von .click Funktionen für die divs erstellen:

Ich versuchte dies:

for (var i = 1; i < 4; i++) { 
     var picName = "#BSViolenceDiv_0" + i.toString(); 
     //alert("\nI have for i: " + i + ": " + picName); 
     $("#div_0" + i.toString()).click(function(){ 
      $("#div_0" + i.toString()).animate({opacity:1}, 1000); 
     });  
    } 

Es funktioniert nicht, weil ich 3.

Was endet als habe ich falsch gemacht?

Answer 1

Es wird besser sein, wenn Sie stattdessen eine globale Klasse verwenden könnte (zB my_div) wie:

<div id="div_01" class="my_div">ASD</div> 
<div id="div_02" class="my_div">ASD</div> 
<div id="div_03" class="my_div">ASD</div> 

Dann click Ereignis dieser Klasse befestigen, damit eine Schleife müssen nicht durch alle div ' s:

$(".my_div").click(function(){ 
    $(this).animate({opacity:1}, 1000); // "$(this)" refer to the clicked div 
}) 

Hoffe das hilft.

$(".my_div").click(function(){ 
 
    $(this).animate({opacity:1}, 1000); 
 
})

.my_div{ 
 
    opacity: 0.3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div_01" class="my_div">ASD</div> 
 
<div id="div_02" class="my_div">ASD</div> 
 
<div id="div_03" class="my_div">ASD</div>

Answer 2

Die Variable i hat seinen Endwert vor dem Code in dem Click-Ereignishandler ausgeführt wird, erreicht, so ist es immer, dass Endwert in dem Klick-Handler verwenden, und als Konsequenz der Selektor "#div_0" + i.toString() bezieht sich nicht auf das angeklickte Element.

Aber Sie brauchen nicht wirklich i, um auf das angeklickte Element verweisen. Nur this verwenden:

ersetzen:

$("#div_0" + i.toString()).animate 

mit:

$(this).animate 

, dass das Wesen des Fehlers ist. Aber wie andere angegeben haben, müssen Sie für jedes div keinen separaten Handler erstellen. Erstellen Sie einfach einen für alle, zum Beispiel indem Sie eine Klasse für sie erstellen, und wählen Sie dann die div Elemente aus.