时间戳

首页 > 解决方案 > EJS循环时的Javascript DOM操作

javascript - EJS循环时的Javascript DOM操作

问题描述

我有几个小时来解决这个问题，但我仍然坚持，似乎无法找到解决方案。简而言之，我试图从 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。如何更改每个特定元素的颜色？

标签： javascriptejs

解决方案

删除 idwishlist并为父 divi添加containerid。

AddEventListener on containerid 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>

推荐阅读