jQuery onclick 没有得到正确的值

Question

我正在尝试获取点击事件的图像 ALT 值，但它没有正常工作，并且在点击时显示相同的值（图像 ALT）。

代码如下：

HTML:

<a href="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_large.gif?v=1420644155" class="product-photo-thumb" title="Map 1">
    <img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/MDM02-south-east-postcode-district-map-detail-large_ee8e2826-b33b-4c77-83b2-f162df33ec33_compact.gif?v=1420644155" alt="Map 1">
</a>

<a href="//cdn.shopify.com/s/files/1/0720/9527/products/png_large.png?v=1420644163" class="product-photo-thumb" title="Map 2">
    <img id="imgVariants" src="//cdn.shopify.com/s/files/1/0720/9527/products/png_compact.png?v=1420644163" alt="Map 2">
</a>

Javascript/jQuery

$(document).ready(function(){
    $('.product-photo-thumb').on("click", function (e) {
      e.preventDefault();
      alert(document.getElementById("imgVariants").alt);
    });
});

>> jsFiddle link

我错过了什么吗？

P.S.: 我知道 ID 必须是唯一的，但我想要一个即使没有唯一 ID 也能工作的解决方案。

Answer 1

有两个元素带有 same Id（不应该），删除它们，您应该使用 e.target

这是一个工作示例.. http://jsfiddle.net/83cyuozz/1/

   $(document).ready(function(){
        $('.product-photo-thumb').on("click", function (e) {
          e.preventDefault();
          alert(e.target.alt);
        });
      });

Answer 2

试试这个代码

$(document).ready(function(){
    $('.product-photo-thumb').on("click", function (e) {
      e.preventDefault();
      alert($(this).find('img').attr('alt'));
    });
});

DEMO

注意 ID 必须是唯一的。

Answer 3

这是工作示例，其中可以有多个具有相同 ID 的元素，但它可以正常工作：JSFIDDLE

  $(document).ready(function(){
    $("body").on("click",".product-photo-thumb", function (e) {
      e.preventDefault();

      alert($(this).children("img").attr("alt"));
    });
  });

jQuery onclick 没有得到正确的值

jQuery onclick not getting proper values

html

javascript

jquery

onclick

DEMO