単純にループ内のJavaScriptコード

Question

このスクリプトは1〜20の番号でループします。私はタグが20回繰り返されることを発見しました。私はループ

Answer 1

外に一度あなたがここに書かれたコードを$('#btn-<?php echo $i;?>').clck(function() {....をしたい

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

はアンチパターンです。ループ内のすべての要素に共通のクラスを使用し、そのクラスに単一のイベントハンドラをアタッチします。たとえば：

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

---

は、ここで実行可能なコードスニペットです。注：PHPは下にHTMLを生成するだけです。 JavaScriptはclickイベントハンドラを各ボタンにアタッチします。

$('.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>