在NodeJS应用程序中使用mongodb和ejs，我创建了一个函数，该函数循环购物车中的产品，并在表格内的页面上动态显示其中的每个产品。

我正在尝试创建一个数量更新功能，该功能使用一个输入字段来获取数量和一个用于更新数据库的按钮。

我的HTML：

<tbody class="product-container">
    <!-- loop through each product -->
    <%  products.forEach (function(element) { %>
        <tr valign="top" class="cart-p-list">
            <!-- get individual unique ID for each product -->
            <input type="hidden" class="id" value="<%= element.item._id %>">

            <td class="col-qty cart-p-qty nowrap" align="right">
                <div class="proopc-input-append">
                    <!-- input for quantity and update button -->
                    <input type="number" class="input-ultra-mini proopc-qty-input qty" size="1" maxlength="4" name="quantity" value="<%= element.qty %>" data-quantity="<%= element.qty %>" step="1" min="1" max="50">
                    <button class="proopc-btn proopc-task-updateqty updateproduct" name="updatecart.0" title="Update Quantity In Cart"><i class="proopc-icon-refresh"></i></button>
                </div>
            </td>
        </tr>
        <% }); %>

出于测试目的，javascript位于页面底部的<script>标记中。

我的JavaScript代码：

window.addEventListener('load',function() {
    {
        // Update Quantity of product in shopping cart
        const block = document.querySelector('.product-container');


        block.addEventListener('click',function(e) {
            if (e.target.classList.contains('updateproduct')) {
                console.log(e);

                let id = e.target.parentNode.parentNode.parentNode.parentNode.querySelector('.id').value;
                let qty = +e.target.parentNode.querySelector('.qty').value;
                console.log(id);

                fetch(`/update/${id}/${qty}`,{
                    method: 'GET'
                }).then((res) => res.text());
            }
        });
    }
});

代码从我的cart.js中获取以下GET请求：

router.get('/update/:id/:qty',function (req,res,next) {
    let productId = req.params.id;
    let quantity = +req.params.qty;

    let cart = new Cart(req.session.cart ? req.session.cart : {});
    cart.update(productId,quantity);
    req.session.cart = cart;
    res.redirect('back');
});

我的购物车型号：

module.exports = function Cart(oldCart) {
    this.items = oldCart.items || {};
    this.totalQty = oldCart.totalQty || 0;
    this.totalPrice = oldCart.totalPrice || 0;

    this.update = function (id,quantity) {
        let currentQuantity = this.items[id].qty;
        let newQuantity = this.items[id].qty = quantity;
        let currentPrice = this.items[id].price;
        let newPrice = this.items[id].item.price * quantity;;
        this.items[id].price = this.items[id].item.price * quantity;
        this.totalQty -= currentQuantity;
        this.totalQty += newQuantity;
        this.totalPrice -= currentPrice;
        this.totalPrice += newPrice;

    };

    this.generateArray = function () {
        let arr = [];
        for (let id in this.items) {
            arr.push(this.items[id]);
        }
        return arr;
    };
};

逻辑工作正常。产品正在更新，价格和数量正确。总价和数量也正确。

但是，如果购物车中有多个产品（两个不同的产品），如果我尝试更新第二个产品（或不是第一个的任何产品）的数量，则在刷新时，而是更新第一个产品。

这是因为更新数量的事件侦听器始终采用页面上第一个动态生成的项目的ID，而不是我尝试更新其数量的ID。

这一定是由于循环遍历ejs文件中的产品引起的，所以我怀疑我需要在js函数中进行某种循环才能获得正确的ID，但是我不确定。