Javascript 以列表中的产品为目标，增加/减少其数量

我有一个产品列表，我希望能够针对每个产品，并在点击按钮时增加/减少其数量。请问如何在纯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>
  

JS

const checkoutBag=document.getElementById（'checkout-bag'）；
const itemCount=document.getElementsByClassName（“项目数量”）；
设itemQuantity=1；
checkoutBag.addEventListener（“单击”），函数（事件）{
const more=event.target.attributes.action.value；//添加产品
const less=event.target.attributes.action.value；//删除产品
如果（更多==“添加”）{
项目数量++
document.getElementsByClassName（“项目数量”）[0]。值=项目数量；
}
如果（小于等于“删除”）{
项目数量--
document.getElementsByClassName（“项目数量”）[0]。值=项目数量；
}
如果（项目数量<1）{
itemQuantity=0；
}
document.getElementsByClassName（“项目数量”）[0]。值=项目数量；
});

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

const productOptions=document.querySelectorAll（“.product options”）；
productOptions.forEach（（节点）=>{
const itemCount=node.querySelector（“.item数量”）；
const add=node.querySelector（“按钮[action='add']”）；
const remove=node.querySelector（“按钮[action='remove']”）；
add.addEventListener（“单击”，（）=>{
itemCount.value=parseInt（itemCount.value，10）+1；
});
remove.addEventListener（“单击”，（）=>{
itemCount.value=parseInt（itemCount.value，10）-1；
});
});

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

const productOptions=document.querySelectorAll（“.product options”）；
productOptions.forEach（（节点）=>{
const itemCount=node.querySelector（“.item数量”）；
const add=node.querySelector（“按钮[action='add']”）；
const remove=node.querySelector（“按钮[action='remove']”）；
add.addEventListener（“单击”，（）=>{
itemCount.value=parseInt（itemCount.value，10）+1；
});
remove.addEventListener（“单击”，（）=>{
itemCount.value=parseInt（itemCount.value，10）-1；
});
});

工作完美，但当我将其包含在代码中时拒绝工作。我怀疑我的代码中有什么东西阻止了它的工作，但我不知道它到底是什么。我是一个初级程序员。控制台里有什么？也许有一些错误。我现在为自己感到羞耻，因为我不太了解如何使用控制台来解决问题。不过，我很乐意与您分享完整的源代码，以便您可以查看：。基本上，当您单击任何产品的“添加到购物车”图标时，该项目将进入购物车。单击站点顶部菜单上的购物车图标，您将看到所有产品的列表。您可以增加/减少任何产品。这就是我遇到的问题。控制台“显示”：

uncaughttypeerror:event.target.attributes.action未定义

，您需要删除“attributes”。无论如何，我已经重新编写了整个代码非常感谢。我喜欢你使用ES6的事实。我是新来的，这肯定会提高我的知识。工作完美，但拒绝工作，当我把它包括在我的代码。我怀疑我的代码中有什么东西阻止了它的工作，但我不知道它到底是什么。我是一个初级程序员。控制台里有什么？也许有一些错误。我现在为自己感到羞耻，因为我不太了解如何使用控制台来解决问题。不过，我很乐意与您分享完整的源代码，以便您可以查看：。基本上，当您单击任何产品的“添加到购物车”图标时，该项目将进入购物车。单击站点顶部菜单上的购物车图标，您将看到所有产品的列表。您可以增加/减少任何产品。这就是我遇到的问题。控制台“显示”：

uncaughttypeerror:event.target.attributes.action未定义

，您需要删除“attributes”。无论如何，我已经重新编写了整个代码非常感谢。我喜欢你使用ES6的事实。我是新手，这肯定会提高我的知识。

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

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;

});