manière efficace d'écrire plusieurs fonctions jquery

Question

J'ai plusieurs divs, et je dois écrire un code comme ceci pour chaque div, et php change l'id en passant par $ NBR ++; à la fin. Existe-t-il un moyen plus rapide d'écrire ceci une fois plutôt que d'avoir ceci d'unique pour chaque 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> 

Cela continue 15 fois ... etc ..... Toutes les variables php sont définies au début de chaque div avec PHP.

Y a-t-il un moyen de «compresser» ceci en un seul code qui pourrait être écrit une fois? Ou doit-il être écrit après chaque div?

Merci pour votre aide!

Answer 1

Ajouter ce dans le haut et enlevez tout autre scénario,

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

Et changer votre code html comme,

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

Notez le html change

1) nouvelle classe playback_divs ajoutée à le div.

2) l'attr de données data-thumb-nbr.