在列表中定位产品并增加/减少其数量

Question

我有一个产品列表，我希望能够定位每个产品并在单击按钮时增加/减少其数量。请问如何用纯 Javascript 实现这一点？

这段代码只能捕获列表中的第一项，那是因为我使用了该项的索引。如何动态定位其余项目并增加/减少其数量？

<ul id="checkout-bag">
            
    <li class="single-product">
        <div class="cart-product">
            <div class="thumb-desc">
                <h4>Product One</h4>
                <p>Description One</p>
            </div>
        </div>
        <div class="product-options">
            <div class="item-count">
                <button action="remove">-</button>
                <input type="text" value="1" class="item-quantity">
                <button action="add">+</button>
            </div>
        </div>
</li>


<li class="single-product">
        <div class="cart-product">
            <div class="thumb-desc">
                <h4>Product Two</h4>
                <p>Description Two</p>
            </div>
        </div>
        <div class="product-options">
            <div class="item-count">
                <button action="remove">-</button>
                <input type="text" value="1" class="item-quantity">
                <button action="add">+</button>
            </div>
        </div>
</li>


<li class="single-product">
        <div class="cart-product">
            <div class="thumb-desc">
                <h4>Product Three</h4>
                <p>Description Three</p>
            </div>
        </div>
        <div class="product-options">
            <div class="item-count">
                <button action="remove">-</button>
                <input type="text" value="1" class="item-quantity">
                <button action="add">+</button>
            </div>
        </div>
</li>


<li class="single-product">
        <div class="cart-product">
            <div class="thumb-desc">
                <h4>Product Four</h4>
                <p>Description Four</p>
            </div>
        </div>
        <div class="product-options">
            <div class="item-count">
                <button action="remove">-</button>
                <input type="text" value="1" class="item-quantity">
                <button action="add">+</button>
            </div>
        </div>
</li>


<li class="single-product">
        <div class="cart-product">
            <div class="thumb-desc">
                <h4>Product Five</h4>
                <p>Description Five</p>
            </div>
        </div>
        <div class="product-options">
            <div class="item-count">
                <button action="remove">-</button>
                <input type="text" value="1" class="item-quantity">
                <button action="add">+</button>
            </div>
        </div>
</li>
      
  </ul>
  

CSS

li {list-style-type:none;
    border: solid 1px gray;
    margin: 10px;
    padding: 15px;
    
}

JS

const checkoutBag = document.getElementById('checkout-bag');
const itemCount =  document.getElementsByClassName("item-quantity");

let itemQuantity = 1;
checkoutBag.addEventListener("click", function(event){
  const more = event.target.attributes.action.value; //add product
  const less = event.target.attributes.action.value; //remove product
  if(more =="add"){
    itemQuantity++
    document.getElementsByClassName("item-quantity")[0].value = itemQuantity;
  }
  if(less =="remove"){
    itemQuantity--
    document.getElementsByClassName("item-quantity")[0].value = itemQuantity;
   }

   if(itemQuantity < 1) {
    itemQuantity = 0;
  }
  document.getElementsByClassName("item-quantity")[0].value = itemQuantity;

});

Answer 1

codesandbox demo

HTML/CSS 代码相同，没有改变。

const productOptions = document.querySelectorAll(".product-options");

productOptions.forEach((node) => {
  const itemCount = node.querySelector(".item-quantity");
  const add = node.querySelector("button[action='add']");
  const remove = node.querySelector("button[action='remove']");

  add.addEventListener("click", () => {
    itemCount.value = parseInt(itemCount.value, 10) + 1;
  });

  remove.addEventListener("click", () => {
    itemCount.value = parseInt(itemCount.value, 10) - 1;
  });
});