Javascript DOM EJS 循环时的操作

Question

我有几个小时的时间来解决这个问题，但我仍然被困在这个问题上，似乎找不到解决方案。简而言之，我试图从 EJS 循环中操纵每个 div。我简化了问题，以便更容易理解。

  <% 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" id="wishlist" style="color:grey;"></i>
        </div>
    <% } %>


    <script>
        const heart = document.getElementById("wishlist")
      
        heart.addEventListener("click", ()=> {
        heart.style.color = "red";
      });
      
    </script>

在我的展示页面上，当我单击该元素时，它会按应有的方式更改颜色，但仅限于第一个产品。我不确定为什么不在循环中击中每个 div 。如何更改每个特定元素的颜色？

Answer 1

删除 i 上的 ID wishlist 并为父级 div 添加 container ID。

在 container id div 上添加事件监听器，并修改目标点击元素，如下面的代码所示。

const heart = document.getElementById("container");
heart.addEventListener("click", (e) => {
  const tgt = e.target;
  if (tgt.classList.contains('fa-heart')) {
    tgt.style.color = "red";
  }
});

.red {
  color: red
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<div id="container">
  <div>
    // products irrelevant code
  </div>

  <div class="d-flex justify-content-around" id="container">
    <i class="btn btn-light fas fa-heart fa-lg" style="color:grey;"></i>
  </div>
  <div>
    // products irrelevant code
  </div>

  <div class="d-flex justify-content-around">
    <i class="btn btn-light fas fa-heart fa-lg" style="color:grey;"></i>
  </div>
  <div>
    // products irrelevant code
  </div>

  <div class="d-flex justify-content-around">
    <i class="btn btn-light fas fa-heart fa-lg" style="color:grey;"></i>
  </div>
</div>

Javascript DOM EJS 循环时的操作

Javascript DOM manipulation while EJS loop

javascript

ejs