Javascript jQuery未读取.ejs页上的变量

我正在使用Express和Postgres数据库将产品加载到一个.ejs页面上，页面上有一个

for..in

循环。加载产品的代码段如下所示，并使用templateVars拉入数据库信息：

            <script>
              let test;
            </script>

            <% for(let item in product) { %>

              <script>
                test += `<%- JSON.stringify(product[item]) %>`
              </script>

<div class="row" id="productList">
            <% for(let item in product) { %>
              <div class="card">
                <img src="<%= product[item].image %>" class="card-img-top" alt="...">
                <h3 class="card-title">
                  <%= product[item].name %>
                </h3>
                <p class="card-text">
                  <%= product[item].description %>
                </p>
                <div class="card-footer">
                  <p>
                    <%= product[item].price_cents %>
                  </p>
                  <a href="#"><i class="fas fa-cart-plus add-burg-event"></i></a>
                </div>
              </div>
              <% } %>
          </div>

问题是，

for..in

循环中的所有产品现在都在

test

中返回，我认为这是有道理的。但是，如何确保在单击“添加到购物车”按钮（

.add burg event

）时，只将特定产品添加到变量中，而不是从循环中添加每个产品

---

我试图使用该产品数据来更新购物车，但我得到的是一个包含所有产品的大对象，而不仅仅是单击的一个产品。

使用

e.target

获取

标记，然后使用jQuery访问

.closest（'.card'））

。谢谢@RandyCasburn我将在文档中查看这些选项！您的购物车需要的所有数据（可能还有产品id？）都必须添加到您的HTML或Javascript中，以便在单击某个内容时，Javascript可以从浏览器中读取这些重要字段，以便执行一些购物车操作。看起来非常不正统。使用元素上的数据属性将产品id（或任何其他需要的）传递给。不清楚“添加到购物车”流程是如何工作的Thank you@James循环是否没有将该产品数据充分注入模板中？还是需要单独添加？如果是这样的话，我有点不确定如何将产品数据与它们显示的卡相关联。

$(document).ready(function () {
  console.log("Document ready");
  $('.add-burg-event').on('click', function (e) {
    e.preventDefault();
    console.log(test);
  });
});