单击时如何添加特定项内部文本

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 => {&nbsp; button.addEventListener("click", addToCart);})//Add to cartfunction addToCart(e) {&nbsp; e.preventDefault();&nbsp; //Create DIV&nbsp; const item = document.createElement("div");&nbsp; item.classList.add("item");&nbsp; //Add name&nbsp; const name = document.createElement("h2");&nbsp; name.classList.add("product-name");&nbsp; name.innerText = e.target.parentNode.querySelector(".product-name").innerText;&nbsp;&nbsp; item.appendChild(name);&nbsp; cart.appendChild(item);}<div class="product">&nbsp; <h2 class="product-name">Beer</h2>&nbsp; <h3 class="product-price">$4</h3>&nbsp; <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 cartfunction addToCart(e) {&nbsp; e.preventDefault();&nbsp; const tgt = e.target;&nbsp; if (!tgt.classList.contains("add")) return; // not a button&nbsp; const parent = tgt.parentNode;&nbsp; //Create DIV&nbsp; const item = document.createElement("div");&nbsp; item.classList.add("item");&nbsp; //Add name&nbsp; const name = document.createElement("h2");&nbsp; name.classList.add("product-name");&nbsp; name.innerText = parent.querySelector(".product-name").innerText;&nbsp; item.appendChild(name);&nbsp; cart.appendChild(item);}<div id="products">&nbsp; <div class=" product ">&nbsp; &nbsp; <h2 class="product-name ">Beer</h2>&nbsp; &nbsp; <h3 class="product-price ">$4</h3>&nbsp; &nbsp; <button class="add ">Add to cart</button>&nbsp; </div>&nbsp; <div class="product ">&nbsp; &nbsp; <h2 class="product-name ">Wine</h2>&nbsp; &nbsp; <h3 class="product-price ">$4</h3>&nbsp; &nbsp; <button class="add ">Add to cart</button>&nbsp; </div></div><div id="cart"></div>