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

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 cartfunction 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>