#javascript #django
Вопрос:
Я использую движок шаблонов 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');
}
Комментарии:
1. Что такое
call
?
Ответ №1:
Этот код возвращает вам первый элемент в 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');
}
Комментарии:
1. Я получаю ошибку при использовании. Не удается прочитать свойство «добавить» неопределенного.
2. Пожалуйста, обратите внимание, что теперь в
buttons
(илиcall
) у вас есть массив элементов, а не один элемент, поэтому вам нужно изменить саму функцию clickCall