Einfach JavaScript-Code in einer Schleife

Question

Dieses Skript durchläuft eine Nummer 1-20. Ich entdeckte, dass die Tags 20 Mal wiederholt wurden.

<?php for ($i = 1; $i <= 20; $i++) { ?> 
    <button id="btn-<?php echo $i;?>">Button<?php echo $i;?></button> 
    <script type="text/javascript"> 
     $('#btn-<?php echo $i;?>').clck(function() { 
      alert("you clicked button <?php echo $i;?>"); 
     }); 
<?php } ?> 

Ich möchte außerhalb der Schleife

Answer 1

Der Code, den Sie geschrieben haben, hier ist ein Anti-Muster, das die $('#btn-<?php echo $i;?>').clck(function() {.... einmal tun. Verwenden Sie eine allgemeine Klasse für alle Elemente in der Schleife und fügen Sie dieser Klasse einen einzelnen Ereignishandler hinzu. Zum Beispiel:

<?php for ($i = 1; $i <= 20; $i++) { ?> 
    <button class="foo" data-id="btn-<?php echo $i;?>">Button<?php echo $i;?></button> 
<?php } ?> 

// in an external .js file far, far away 
$('.foo').click(function() { 
    console.log("You clicked button " + $(this).data('id')); 
}); 

---

Hier ist ein lauffähiges Code-Schnipsel. Hinweis PHP muss nur das HTML unten generieren. Das JavaScript wird dann den Ereignishandler click an jede Schaltfläche anhängen.

$('.foo').click(function() { 
 
    console.log("You clicked button " + $(this).data('id')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="foo" data-id="1">Button 1</button> 
 
<button class="foo" data-id="2">Button 2</button> 
 
<button class="foo" data-id="3">Button 3</button> 
 
<button class="foo" data-id="4">Button 4</button>