複数のjquery関数を効率的に書く方法

Question

私は複数のdivを持っているので、各divにこのようなコードを書いてPHPに$ NBR ++を循環させてidを変更させる必要があります。最後に。これを各divで一意にするのではなく、一度書き込む方が早いのですか？

// when $NBR = 1 
    <div class="playbutton<?php echo $NBR?>"> 
     <script> 
      $(".playbutton<?php echo $NBR?>").click(function() 
       { $(".playbutton<?php echo $NBR?>").hide(); 
       $('#songpicture').attr("src", "<?php echo $thumb[$NBR]?>"); 
       }); 
     </script> 
    </div> 


    // when $NBR = 2 
    <div class="playbutton<?php echo $NBR?>"> 
     <script> 
      $(".playbutton<?php echo $NBR?>").click(function() 
       { $(".playbutton<?php echo $NBR?>").hide(); 
       $('#songpicture').attr("src", "<?php echo $thumb[$NBR]?>"); 
       }); 
     </script> 
    </div> 

これは15回続きます... etc .....すべてのPHP変数は、PHPで各divの冒頭に設定されています。

これは、これを1回書き込むことができる1つのコードに「圧縮」できる方法はありますか？それとも、各部門の後に書かなければならないのですか？

ありがとうございました！

Answer 1

HTMLはplayback_divsが追加

1）新しいクラスを変更し、

<div class="playback_divs playbutton<?php echo $NBR?>" data-thumb-nbr="<?php echo $thumb[$NBR]?>"> 

注意をトップでこれを追加して、他のすべてのスクリプトを削除し、

<script> 
    $(function() { 
    $(".playback_divs").click(function() { 
     $(this).hide(); 
     $('#songpicture').attr("src", $(this).data('thumb-nbr')); 
    }); 
    } 
</script> 

をそして、あなたのHTMLを変更しますdiv。

2）データattr data-thumb-nbr。