如何识别图像标签不是静态的点击图像？

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

我有一个使用PHP代码从服务器显示在html中的图像列表

Here is the PHP code that is inside a div:

这是div中的PHP代码：

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.

PHP代码循环服务器中的每个图像并创建另一个div，其中是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.

现在，我的问题是如何识别点击的特定图像？我无法使用document.getElementById（''）;因为首先我不知道身份证对吗？虽然我通过添加id ='template'。$ row [“imageName”]来创建每个唯一ID。“''表示每个图像的假定ID是模板[x]，其中x是数据库中的图像名称。

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?

有什么方法可以识别图像吗？

5 个解决方案

#1

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.

这将显示您在弹出窗口中单击的图像的ID。

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

基本上上面的代码等待点击页面上的任何img元素。

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.

单击img后，您只需检索点击元素的'id'属性，该属性可由$（this）引用，从而将其显示在警告框中。

#2

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.

如果通过AJAX或某种动态方法将图像加载到页面中，则可能需要使用$（document）.on（）。使用“.img-responsive”选择器为您的页面选择class =“img-responsive”的所有图像。

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

#3

jQuery:

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.

.divclass img因为（如果你愿意的话，ID可以是#divid img）我想只在那个特定的div中定位图像会更有效，而不是在整个文档中。

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

您还可以执行其他JavaScript函数，将图像的ID作为参数传递，甚至传递整个元素，例如：

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

要么

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!

祝你好运！

#4

$('.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-responsive类的图像，点击后我们可以轻松访问它

#5

$("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 comes from the event binding function.

event.target：event.target属性返回触发事件的DOM元素。事件参数来自事件绑定函数。

#1