EJS循环生成的DOM元素点击事件仅首个生效的问题解决咨询

嘿，我完全懂你现在的困扰——花了好几个小时折腾却只生效第一个元素，确实让人头疼！这个问题的根源其实是HTML中id的唯一性规则，咱们一步步来解决它：

问题原因 #

你在EJS循环里给每个心形图标都设置了id="wishlist"，但HTML规范里明确要求页面上的id必须是唯一的。当你用document.getElementById("wishlist")时，浏览器只会返回第一个匹配这个id的元素，所以只有第一个产品的心形图标能响应点击事件。

解决方案 #

我们可以用两种方法来实现每个元素独立触发颜色变化，选哪种取决于你的场景：

方法1：改用Class + 遍历绑定事件 #

把id换成class，然后获取所有匹配的元素，逐个绑定点击事件：

修改后的EJS代码：

<% for(let i of products) { %>
<div> <!-- products irrelevant code --> </div>
<div class="d-flex justify-content-around">
  <i class="btn btn-light fas fa-heart fa-lg wishlist-btn" style="color:grey;"></i>
</div>
<% } %>

对应的JavaScript代码：

// 获取所有心形按钮
const heartButtons = document.querySelectorAll('.wishlist-btn');

// 遍历每个按钮，绑定点击事件
heartButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 这里还可以做切换逻辑，点击变红再点击变灰
    button.style.color = button.style.color === 'red' ? 'grey' : 'red';
  });
});

方法2：事件委托（更适合动态元素场景） #

如果你的页面后续会动态添加产品（比如分页加载、新增商品），事件委托会更高效——把事件绑定到父元素，利用事件冒泡来处理子元素的点击：

修改后的EJS代码（给产品加个父容器）：

<% for(let i of products) { %>
<div class="product-item">
  <div> <!-- products irrelevant code --> </div>
  <div class="d-flex justify-content-around">
    <i class="btn btn-light fas fa-heart fa-lg wishlist-btn" style="color:grey;"></i>
  </div>
</div>
<% } %>

对应的JavaScript代码：

// 绑定到父容器（如果没有合适的父容器，也可以用document.body）
const productWrapper = document.querySelector('.product-item').parentNode;

productWrapper.addEventListener('click', (e) => {
  // 判断点击的目标是不是心形按钮
  if (e.target.classList.contains('wishlist-btn')) {
    const clickedButton = e.target;
    clickedButton.style.color = clickedButton.style.color === 'red' ? 'grey' : 'red';
  }
});

事件委托的好处是：即使后续通过JS动态添加新的产品元素，也不需要重新绑定事件，父元素会自动处理新元素的点击。

总结 #

核心就是抛弃重复的id，改用class来标识同类元素，再通过遍历绑定或事件委托实现每个元素的独立交互。这样每个心形图标点击时都会单独改变颜色啦！

内容的提问来源于stack exchange，提问作者Claudio Fernini