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

Posted 2023-02-23

【中文标题】在列表中定位产品并增加/减少其数量

【英文标题】：Target a product in a list and increment/decrement its quantity

【发布时间】：2020-12-12 22:07:15

【问题描述】：

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

);

【参考方案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;
  );
);

【讨论】：

工作完美，但当我将它包含在我的代码中时拒绝工作。我怀疑我的代码中的某些东西正在阻止它工作，但我无法弄清楚它到底是什么。我是初级程序员。

控制台中有什么？可能有一些错误。

我现在为自己感到羞耻，因为我不太了解如何使用控制台来解决问题。不过，我很乐意与您分享完整的源代码，以便您查看：here。基本上，当您单击任何产品的添加到购物车图标时，该商品就会进入购物车。单击网站顶部菜单上的购物车图标，您将看到所有产品的列表。您可以在哪里增加/减少任何产品。这就是我遇到问题的地方。

控制台“说”：Uncaught TypeError: event.target.attributes.action is undefined，您需要删除“属性”。反正我重写了整个代码codesandbox.io/s/pedantic-fermi-t8t47

非常感谢。我喜欢你使用 ES6 的事实。我是新手，这肯定会提高我的知识。