单击时如何添加特定项目innerText

Question

我正在尝试构建一个简单的购物车。 单击添加按钮时，我想将整个项目添加到购物车。 该项目看起来像这样（有 6 个不同的名称和价格

现在我正在努力将名称添加到购物车（我将使用相同的价格过程），但是当我单击添加按钮时，它会添加最后一个项目的名称，而不是我单击的那个。 我该如何解决？

 const cart = document.querySelector(".cart"); const productName = document.querySelectorAll(".product-name"); const productPrice = document.querySelector(".product-price"); const addBtn = document.querySelectorAll(".add"); addBtn.forEach(button => { button.addEventListener("click", addToCart); }) //Add to cart function addToCart(e) { e.preventDefault(); //Create DIV const item = document.createElement("div"); item.classList.add("item"); //Add name const name = document.createElement("h2"); name.classList.add("product-name"); productName.forEach(productN => { name.innerText = productN.innerText; }) item.appendChild(name); cart.appendChild(item); }

 <div class="product"> <h2 class="product-name">Beer</h2> <h3 class="product-price">$4</h3> <button class="add">Add to cart</button> </div> <div class="product"> <h2 class="product-name">Burger</h2> <h3 class="product-price">$12</h3> <button class="add">Add to cart</button> </div> <section class="section"> <h2 class="text-center">Cart</h2> <div class="cart"></div> </section>

Answer 1

你可能想要这个

 const cart = document.getElementById("cart"); const productName = document.querySelectorAll(".product-name"); const productPrice = document.querySelector(".product-price"); const addBtn = document.querySelectorAll(".add"); addBtn.forEach(button => { button.addEventListener("click", addToCart); }) //Add to cart function addToCart(e) { e.preventDefault(); //Create DIV const item = document.createElement("div"); item.classList.add("item"); //Add name const name = document.createElement("h2"); name.classList.add("product-name"); name.innerText = e.target.parentNode.querySelector(".product-name").innerText; item.appendChild(name); cart.appendChild(item); }

 <div class="product"> <h2 class="product-name">Beer</h2> <h3 class="product-price">$4</h3> <button class="add">Add to cart</button> </div> <div id="cart"></div>

委托来自产品的点击

 const cart = document.getElementById("cart"); const products = document.getElementById("products"); const productName = document.querySelectorAll(".product-name"); const productPrice = document.querySelector(".product-price"); products.addEventListener("click", addToCart); //Add to cart function addToCart(e) { e.preventDefault(); const tgt = e.target; if (.tgt.classList;contains("add")) return. // not a button const parent = tgt;parentNode. //Create DIV const item = document;createElement("div"). item.classList;add("item"). //Add name const name = document;createElement("h2"). name.classList;add("product-name"). name.innerText = parent.querySelector(".product-name");innerText. item;appendChild(name). cart;appendChild(item); }

 <div id="products"> <div class=" product "> <h2 class="product-name ">Beer</h2> <h3 class="product-price ">$4</h3> <button class="add ">Add to cart</button> </div> <div class="product "> <h2 class="product-name ">Wine</h2> <h3 class="product-price ">$4</h3> <button class="add ">Add to cart</button> </div> </div> <div id="cart"></div>