时间戳

首页 > 解决方案 > AddEventListener 事件仅触发一次

javascript - AddEventListener 事件仅触发一次

问题描述

我正在使用 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');
}

标签： javascriptdjango

解决方案

此代码返回 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');
}

推荐阅读