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

Question

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

以下是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>";
}

PHP代码循环服务器中的每个图像并创建另一个div，其中包含img。

现在，我的问题是如何识别点击的特定图像？我无法使用document.getElementById('');，因为首先我不知道ID是对的吗？虽然我通过添加id='template" . $row["imageName"]. "'使每个ID都成为唯一ID，这意味着每个图像的假定ID为template[x]，其中x是数据库中的图像名称。

我正在努力识别用户点击的特定图像。

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

Answer 1

这样做：

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

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

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

点击img后，您只需检索点击的元素的'id'属性，$(this)可以引用该属性 ，因此将其显示在警告框中。

Answer 2

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

它将为所有图片创建点击监听器，我们只想跟踪特定图像，具有img-responsive类的图像，点击后我们可以使用this

轻松访问它

Answer 3

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

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

Answer 4

jQuery的：

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

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

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

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

或

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

功能本身：

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

祝你好运！

Answer 5

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

Demo Fiddle

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