如何知道我点击了哪个项目？答案

【问题标题】：How to know on what item I click?如何知道我点击了哪个项目？
【发布时间】：2021-07-15 16:45:05
【问题描述】：

我正在使用 ejs 为在线商店提供图片。我有一个商品页面。当我点击其中一件商品时，我想获取有关我点击的商品的信息。我的数据库中有商品信息。为了获得这些信息，我需要知道我点击了哪些商品。我该怎么做？

HERE IS MY CODE OF PAGE WITH GOODS

   <div class="goods">
      <% const array = goods.items %>
      <% array.forEach (function (name) { %>
            <% const imgName = name.code %>

            <div class="item">
                  <a href="/goodsDescription/<%= folderName %>/<%=  imgName  %>"><img class="image" src="/img/<%= folderName %>/<%=  imgName  %>.jpg"></a>
                  <h3 class="product-title"><%=  name.name  %></h3>
                  <p class="product-price__current"><%= name.price %>₴</p>
                  <button class="buy-btn">Buy</button>
            </div>
      <% }) %>
      </div>

【问题讨论】：

为您想要监听点击的每个项目附加一个事件监听函数。使用函数的 event 参数来了解使用标签上的某个唯一 ID 或其他自定义属性（例如 data-product-id）单击了哪个项目。建议的文档developer.mozilla.org/en-US/docs/Web/API/EventListener
您可以为每个 div 添加点击事件的事件监听器，并使用event.target 来检索您点击的元素。类似于：document.querySelectorAll('.item').forEach(item => item.addEventListener('click', (event) => { // here you can refer to the element either via event.target or item or this } ))

标签： javascript node.js ejs

【解决方案1】：

您可以通过data-attribute 或e.target.dataset 访问它

<div class="goods">
  <% const array = goods.items %>
  <% array.forEach (function (name) { %>
        <% const imgName = name.code %>

        <div class="item" data-id="<%= id %>">
              <a href="/goodsDescription/<%= folderName %>/<%=  imgName  %>" target="_blank"><img class="image" src="/img/<%= folderName %>/<%=  imgName  %>.jpg"></a>
              <h3 class="product-title"><%=  name.name  %></h3>
              <p class="product-price__current"><%= name.price %>₴</p>
              <button class="buy-btn">Buy</button>
        </div>
  <% }) %>
  </div>

<script>
  $('.item').addEventListener('click', e => {
    let id = e.target.dataset.id
    let photoclicked = e.target.querySelector('img').getAttribute('src');
})
</script>

【讨论】：

这样我就可以通过id知道点击了哪张图片，并在后面使用它？
已更新答案以获取图像源。请注意，我制作了图像 HREF target="_blank" - 否则当前页面会更改 URL
好吧。但是为什么我既需要 let id .... 又需要让 photoclicked 呢？有一个还不够吗？

【解决方案2】：

  <div class="goods">
  <% const array = goods.items %>
  <% array.forEach (function (name) { %>
        <% const imgName = name.code %>

        <div class="item<%= id %>">
              <a href="/goodsDescription/<%= folderName %>/<%=  imgName  %>"><img class="image" src="/img/<%= folderName %>/<%=  imgName  %>.jpg"></a>
              <h3 class="product-title"><%=  name.name  %></h3>
              <p class="product-price__current"><%= name.price %>₴</p>
              <button class="buy-btn">Buy</button>
        </div>
  <% }) %>
  </div>

<script>
  $('.item<%= id %>').addEventListner('click', ()=>{
    // do it here
})
</script>

【讨论】：