将两个产品添加到购物车时，javascript/ajax 不起作用，如何解决此问题？

Question

在我的购物车视图页面上，当购物车有一种产品时，我可以通过单击 + 和 - 按钮来增加和减少产品数量。当我向购物车添加不止一种产品时，增加和减少按钮对任何产品都不起作用。

当我的购物车中只有一种产品时工作正常。

将多个产品添加到购物车时，增加 (+) 和减少 (-) 按钮不起作用。

HTML

{% for cart_product in cart %}
    <tr class="product-row">
        <td>
            <figure class="product-image-container">
                <a href="{{ cart_product.product.get_absolute_url }}" class="product-image">
                    <img src="{{ cart_product.product.product_img_1.url }}" alt="product"
                        class="img-fluid">
                </a>
            </figure>
        </td>
        <td>
            <div class="product-single-qty">
                <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">

                    <div class="minus-cart value-button"
                        value="Decrease Value" pid="{{ cart_product.product.id }}">-</div>
                    <span class="number">{{ cart_product.quantity }}</span>
                    <div class="plus-cart value-button"
                        value="Increase Value" pid="{{ cart_product.product.id }}">+</div>
                </div>
            </div>
        </td>
        <td class="text-right">
            <span class="subtotal-price each_pro_subtotal">{{ cart_product.total_cost }}</span>
        </td>
    </tr>
{% endfor %}

JavaScript

$(".plus-cart").click(function(){
    var id = $(this).attr("pid").toString();
    var eml = this.parentNode.children[1];

    $.ajax({
        type : "GET",
        url : "/shop/pluscart",
        data : {
        prod_id : id
        },
        success : function(data){
        eml.innerText = data.quantity;
        each_subtotal = document.getElementsByClassName("each_pro_subtotal");
        each_subtotal[0].innerText = data.each_pro_subtotal;
        document.getElementById("subtotal").innerText = data.subtotal;
        },
    })
});

Answer 1

您可以尝试将 var eml = this.parentNode.children[1]; 替换为：

var eml = $(this).closest('span.number')[0];