Я пытаюсь получить значения изображения ALT на событии клика, но он не работает так, как должен быть, и отображает одно и то же значение (изображение ALT) при щелчке.jQuery onclick не получает правильные значения

Вот код:

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

Am I отсутствует какой-либо вещь?

P.S .: Я знаю, что идентификаторы должны быть уникальными, но я хотел решение, которое может работать даже без уникальных идентификаторов.

источник

2015-01-08 Dipak G.

идентификаторы *** обязательно *** быть уникальным в контексте документа ... –

... и объяснить, почему: Браузеры поддерживают быстрый поиск словаря для идентификаторов, которые содержат один элемент DOM для каждого значения идентификатора. Это означает, что 'document.getElementById' (и, следовательно, jQuery также) может видеть только первый встречный элемент с определенным идентификатором. –

@ A.Wolff Я знаю, что идентификаторы должны быть уникальными, но мне нужно решение, которое может работать даже без уникальных идентификаторов. –

Есть два элемента с 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); 
     }); 
     });

источник

2015-01-08 09:48:47

попробовать этот код

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

DEMO

ПРИМЕЧАНИЕID должно быть уникальным.

источник

2015-01-08 09:50:18 Girish

Вот рабочий пример, где может быть несколько элементов с таким же ID, и все же он будет работать нормально: JSFIDDLE

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

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

источник

2015-01-08 10:02:36 TechGirl

jQuery onclick не получает правильные значения

ответ

DEMO

Смежные вопросы