使用 AJAX 仅更新目标元素-解网

问：

当有人增加或减少产品数量时，我正在尝试使用 ajax 更新我的购物车页面，我的视图逻辑很好。我可以推断出的问题是针对类“ajax_updater”，一旦我点击数量按钮 ajax 即可工作，但仅在特定产品上，它以相同类“.quantity-style”为目标的所有产品数量，并根据目标产品更改值，因此，如果产品 A 的数量在 ClickEvent 之后为 4，产品 B、D、F 的数量也被定位并更改为 4，有什么解决方案？

{% for item in items %}
    <div class="quantity">
        <p id="quantity-style" class="quantity-style">{{item.quantity}}</p>
        <div class="quantity-arrows">
            <img data-product="{{item.product.id}}" class="ajax_updater" data-action="add" src="{% static 'shop/images/arrow-up.png' %}">

            <img data-product="{{item.product.id}}" class="ajax_updater" data-action="remove" src="{% static 'shop/images/arrow-down.png' %}">
        </div>          
    </div>
{% endfor %}


function update_arrow() {
    $.ajaxSetup ({
        cache: false
    });
    var spinner = '<i class="fas fa-circle-notch fa-spin" style="font-size:15px;" alt="loading" ></i>';

    $(".quantity-style").html(spinner).load(update_quantity_url);
    console.log(update_arrow_url);
}

$('.ajax_updater').click(function () {
    update_arrow();
    console.log('hit hit');
});

JavaScript HTML Django ajax dom

function update_arrow(container) {
    $.ajaxSetup ({
        cache: false
    });
    var spinner = '<i class="fas fa-circle-notch fa-spin" style="font-size:15px;" alt="loading" ></i>';

    container.find(".quantity-style").html(spinner).load(update_quantity_url);
    console.log(update_arrow_url);
}

$('.ajax_updater').click(function () {
    update_arrow($(this).closest('.quantity'));
    console.log('hit hit');
});

使用 AJAX 仅更新目标元素

update only targeted element with ajax

评论

评论