Захват данных из нескольких идентификаторов с таким же именем

Question

Мне нужно захватить и отобразить значение атрибута в пределах той же метки, что и текст.

Я использовал это, но работал только для первого id = "hit". Я предполагаю, что это потому, что у каждого есть одинаковое имя (хит).

Я хочу просто нажать любую ссылку, отобразить данные, собранные в соответствующем месте.

То есть, если я нажимаю на первую ссылку, отображается в виде текста: 934410 (если он работает) Но если я нажимаю на второй или третьей линии, это уже не работает, потому что вторая ссылка должна отображаться : 20201 и третья ссылка должна показать: 2hello

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
 

 
<a href="#link" data-href="934410" id="hit">Test 1</a><br> 
 
<a href="#link" data-href="20201" id="hit">Test 2</a><br> 
 
<a href="#link" data-href="2hello" id="hit">Test 3</a><br> 
 

 
<script> 
 
$("#hit").click(function() { 
 
\t capturetxt = $("#hit").attr('data-href'); 
 
\t $("#hit").html(capturetxt); 
 
}); 
 
</script>

Я знаю, что могу это сделать с помощью OnClick = "MYFUNCTION ('значение, которое будет отображаться');" в каждом <a>

, но я не хочу использовать onclick <a> внутри этикетки, и поэтому мне трудно решить эту проблему.

Answer 1

Измените идентификаторы на классы. Идентификаторы должны быть уникальными. Кроме того, вы должны использовать функцию jQuery data и передать в качестве параметра параметр href.

$('.hit') также возвращает коллекцию HTML. Чтобы получить конкретный текст, вам нужно использовать $(this)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#link" data-href="934410" class="hit">Test 1</a><br> 
 
<a href="#link" data-href="20201" class="hit">Test 2</a><br> 
 
<a href="#link" data-href="2hello" class="hit">Test 3</a><br> 
 

 
<script> 
 
    $(".hit").on('click', function() { 
 
     capturetxt = $(this).data('href'); 
 
     $(this).html(capturetxt); 
 
    }); 
 
</script>

Answer 2

ваши идентификаторы должны быть уникальными. Неисторические идентификаторы недействительны HTML-разметкой.

Кроме этого, вы также можете выбрать атрибут data-href.

$("[data-href]").click(function() { 
    capturetxt = $(this).attr('data-href'); 
    $(this).html(capturetxt); 
}); 

Вы можете увидеть здесь работать: https://jsfiddle.net/b12rx1ua/

Надежда, что помогает!