javascript - How to identify the clicked image where the image id tag is not static? - Stack Overflow

I Have a list of images that is displayed in the html from the server using PHP codeHere is the PHP cod

I Have a list of images that is displayed in the html from the server using PHP code

Here is the PHP code that is inside a div:

while($row = $result->fetch_assoc()) {
    echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'><a class='thumbnail' href='#'><img id='template" . $row["imageName"]. "' class='img-responsive' src='../images/templates/" . $row["imageName"].".". $row["imageExtension"]."' alt='error' width='333px' height='262px' class='img-thumbnail' onClick='changeImage()'></a></div>";
}

The PHP code loops every image in the server and creates another div and inside it is the img.

Now, my problem is how can I identify the specific image clicked? I could not use the document.getElementById(''); because in the first place I don't know the ID right? Although I made each of them unique IDs by adding the id='template" . $row["imageName"]. "' which means the supposed ID of each image is template[x] where x is the image name from the database.

I am struggling how I can identify the specific image that has been clicked by the user.

Is there any way I can identify the image?

I Have a list of images that is displayed in the html from the server using PHP code

Here is the PHP code that is inside a div:

while($row = $result->fetch_assoc()) {
    echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'><a class='thumbnail' href='#'><img id='template" . $row["imageName"]. "' class='img-responsive' src='../images/templates/" . $row["imageName"].".". $row["imageExtension"]."' alt='error' width='333px' height='262px' class='img-thumbnail' onClick='changeImage()'></a></div>";
}

The PHP code loops every image in the server and creates another div and inside it is the img.

Now, my problem is how can I identify the specific image clicked? I could not use the document.getElementById(''); because in the first place I don't know the ID right? Although I made each of them unique IDs by adding the id='template" . $row["imageName"]. "' which means the supposed ID of each image is template[x] where x is the image name from the database.

I am struggling how I can identify the specific image that has been clicked by the user.

Is there any way I can identify the image?

Share Improve this question edited Feb 12, 2016 at 13:41 vard 4,1562 gold badges29 silver badges49 bronze badges asked Feb 12, 2016 at 12:52 JeffManJeffMan 4924 silver badges11 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 4

Do this:

$("img").click(function(){
   alert("Image ID is: " + $(this).attr("id"));
});

This will show the ID of the image u clicked in a pop-up.

Basically the above code waits for a click on any img element on the page.

Once an img is clicked, u simply retrieve the 'id' attribute of the clicked element which can be referred to by $(this), and hence display it in an alert box.

If the images are loaded into the page via AJAX or some kind of dynamic method, you may need to use $(document).on(). Use the ".img-responsive" selector to select all images with class="img-responsive" for your page.

$(document).on("click", ".img-responsive", function() {
    alert("Image ID is: " + $(this).attr("id"));
}

jQuery:

$('.divclass img').click(function() {
   console.log('Clicked image ID ' + $(this).attr('id'));
});

.divclass img because (or ID as #divid img if you wish) I guess it would be more efficient to target images only in that specific div, and not in the whole document.

You can also execute other JavaScript functions, passing the ID of the image as a parameter, or even the whole element, for example:

someFunction($(this)); // Transfer the whole element as an argument.

or

someFunction($(this).attr('id')); // Transfer just the ID as an argument.

And the function itself:

function someFunction(image) {
    // Do some things with the image.
}

Best of luck!

$('.img-responsive').on('click',function(){
    $(this).attr("id");
});

It will create click listener for all images and we want to track for specific images only, images which has img-responsive class and once it got clicked we can easily access it using this

$("img").click(function(event){
   alert("Image ID is: " + event.target.id);
});

Demo Fiddle

event.target : The event.target property returns which DOM element triggered the event.The event parameter es from the event binding function.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744717251a4589693.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信