jquery - 编写多个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 次......等等......所有 php 变量都设置在 PHP 的每个 div 的开头。

那么有没有一种方法可以将其“压缩”成一个可以编写一次的代码？还是必须在每个div之后写？

谢谢你的帮助！

Answer 1

在顶部添加它并删除所有其他脚本，

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

并将您的 html 更改为，

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

注意html的变化

1) 新类playback_divs添加到 div。

2）数据属性data-thumb-nbr。