Блог

Главная - Вопросы по программированию - Событие onClick для контейнера с повторяющимися идентификаторами

Событие onClick для контейнера с повторяющимися идентификаторами

#javascript #jquery

#javascript #jquery

Вопрос:

Я знаю, что это странно, но существующий код, над которым я работаю, имеет повторяющиеся идентификаторы вместо класса.

 <div class="67275686" id="sy_brn"><b>Some Text Goes Here 1</b></div>
<div class="1227552" id="sy_brn"><b>Some Text Goes Here 2</b></div>
<div class="4527552" id="sy_brn"><b>Some Text Goes Here 3</b></div>

я пытаюсь получить значение класса, используя sy_brn ID.

ожидая получить значение, подобное-

 $('#sy_brn').click(function() { 
var value = $(this).attr('class');
});

он не работает, так как несколько идентификаторов на одной странице не работают.
У меня нет гибкости для преобразования всех <идентификаторов div в class .

Есть ли какой-нибудь способ, которым я могу вызвать щелчок для идентификатора sy_brn и получить значение класса?

Комментарии:

1. попробуйте $('[id="sy_brn"]').click(

2. Это не только странно, недопустимо иметь несколько одинаковых элементов id . Я бы исправил это, но если это невозможно, я бы запросил все элементы на основе какого-то другого общего аспекта, например, их положения в DOM.

Ответ №1:

Используйте querySelectorAll

 const els = document.querySelectorAll("#sy_brn");
els.forEach(el => el.addEventListener("click", ev => alert(ev.currentTarget.classList))); 
 <div class="67275686" id="sy_brn"><b>Some Text Goes Here 1</b></div>
<div class="1227552" id="sy_brn"><b>Some Text Goes Here 2</b></div>
<div class="4527552" id="sy_brn"><b>Some Text Goes Here 3</b></div>

Ответ №2:

Используйте приведенный ниже фрагмент текста. Я думаю, это сработает.

 $('div[id="sy_brn"]').click(function() { 
  var value = $(this).attr('class');
  console.log(value)
});