эффективный способ записи нескольких функций jquery

Question

У меня есть несколько div, и я должен написать код, подобный этому для каждого div, и изменить php на id путем циклического перехода через $ NBR ++; в конце. Есть ли более быстрый способ написать это один раз, а не иметь это уникальное для каждого 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 устанавливается в начале каждого div с PHP.

Так есть способ, которым я могу «сжать» это в один код, который можно было бы написать один раз? Или это должно быть написано после каждого 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) данные attr data-thumb-nbr.