Question

I have multiple divs, and I have to write a code like this out for each div, and have php change the id by cycling through $NBR++; at the end. Is there a quicker way to write this once rather than to have this unique for each 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>

This goes on 15 times …etc…..All php variable are set at the beginning of each div with PHP.

So is there a way that I can ‘compress’ this into one code that could be written once? Or must it be written after each div?

Thanks for your help!

Answer 1

Add this in the top and remove all other script,

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

And change your html as,

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

Note the html changes

1) new class playback_divs added to the div.

2) the data attr data-thumb-nbr.