使用jQuery从PHP循环中选择元素的id

Question

I have a list of <img> tags with each of them contains different id. This is done using PHP for loop as shown below:

<?php
   for($n=0; $n<=5; $n++)
   {    
?>          
      <img id="<?php echo 'time_'.$n; ?>" src="$output-mp4_thumbnails-$n.jpg">
<?php
   }
?>

I want to use jQuery in such a way that, when I click on the specific image on my browser, it would print out the id accordingly. Below is how I code it:

$(document).ready(function () {
    $("img").click(function () {
       alert($("img").attr("id"));
    }); 
});

However this keeps printing only the first id, which is time_0. I have been looking around for ways to solve this, and I found out about change(), but it can only be used for form inputs.

Any suggestions will be greatly appreciated.

Answer 1

You're nesting php tags <?php and ?>, specifically in the loop.

Try to echo out the image tag as:

for($n=0; $n<=5; $n++)
{               
    echo "<img id='time_{$n}' src='{$output}-mp4_thumbnails-{$n}.jpg' />";
}

This should generate unique image ids as time_0, time_1 and so on upto time_5. In addition to this, you also need to incorporate either @Arun's answer or @tchow002 answer on the jQuery side as:

$(document).ready(function () {
    $("img").click(function () {
       alert(this.id)
    }); 
});