Блог

Я использую движок шаблонов Django и JavaScript. Мой HTML выглядит так

 <p class="content-card__address">{{ z.formatted_address|truncatewords:6 }}</p>
<div class="content-card-inner">
  <p class="content-card__review">Отзывы ({{ z.post_relate.all.count }})</p>
  <p class="content-card__phone">{{ z.international_phone_number }}</p>
  <div class="div-shaddow"></div>
  <p class="content-card__text">Показать</p>
</div>
 

Карточки с текстом, который будет сгенерирован на серверной части с помощью механизма шаблонов. Мой код JavaScript работает только на первой карте, и мне нужно, чтобы он работал на всех картах. С помощью JavaScript я добавляю класс к элементам div. Вот мой JavaScript

 let call = document.querySelector('.content-card__text');
let divShadow = document.querySelector('.div-shaddow');
call.addEventListener('click', clickCall)

function clickCall() {
  call.classList.add('visually-hidden');
  divShadow.classList.add('visually-hidden');
}
 

Этот код возвращает вам первый элемент в DOM, и вы добавляете обработчики щелчков только для него

 document.querySelector('.content-card__text')
 

Это будет работать на вас:

 const buttons = document.querySelectorAll('.content-card__text');

buttons.forEach(button => {
   button.addEventListener('click', clickCall);
});
 

Но, пожалуйста, также обратите внимание, что вам необходимо учитывать это при работе с .divShadow , если этот элемент не один на странице

Обновление: пример, основанный на вашем комментарии

 const buttons = document.querySelectorAll('.content-card__text');
const divShadow = document.querySelectorAll('.div-shaddow');

buttons.forEach((button, index) => {
   button.addEventListener('click', () => clickCall(index));
});

function clickCall(index) {
  buttons[index].classList.add('visually-hidden');
  divShadow[index].classList.add('visually-hidden');
}