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

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 是 template[x] 其中x 是数据库中的图像名称。

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

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

Answer 1

这样做：

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

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

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

单击img 后，您只需检索单击的元素 的“id”属性，$(this) 可以引用该元素，然后显示它在一个警告框中。

Answer 2

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

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

Answer 3

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 4

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

它将为所有图像创建点击监听器，我们只想跟踪特定图像，具有img-responsive 类的图像，一旦它被点击，我们可以使用this 轻松访问它

Answer 5

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

Demo Fiddle

event.target : event.target 属性返回哪个 DOM 元素触发了事件。event 参数来自事件绑定函数。