Question

我有两个图标用于增加或减少span元素中的值。

我有以下代码HTML：

<td>
    <i class="glyphicon glyphicon-triangle-left"></i>
    <span>{{ item.qty }}</span>
    <a class="triangle_right" href="{% url 'add-to-bag' item.item.upc %}"><i class="glyphicon glyphicon-triangle-right"></i></a>
</td>

和jQuery：

$(".triangle_right").on("click", function(){

    var url = $(this).attr('href');

    $.ajax({
        type: "GET",
        url: url,

        success: function(data){
            $("#small-bag").html(data);
            $(this).prev().html('0');
        }
    });

    return false;
});

正如您所看到的，我在用户点击图标后尝试更新两个元素。标识为#small-bag的第一个元素会更新，但第二个元素不会更新。我正在尝试更新span元素值，实际上，我想将1添加到当前显示的值。我怎样才能做到这一点？此外，我将我的图标放在a标记内，以便可以点击它来发送请求，我是否可以使用a标记，仍然只使用i标记来调用网址？

P.S。我现在正在使用0作为占位符。但我想在实际显示的值中添加一个。

Answer 1

问题是因为this $.ajax处理程序中的success不是点击的.triangle-right元素;你需要在变量中保存该引用。试试这个：

$(".triangle_right").on("click", function(e) {
    e.preventDefault();
    var $triangle = $(this);
    var url = $triangle.attr('href');

    $.ajax({
        type: "GET",
        url: url,
        success: function(data){
            $("#small-bag").html(data);
            $triangle.prev().html('0');
        }
    });
});

要在元素的当前值中添加一个，您可以执行此操作 - 假设始终仅包含数值：

$triangle.prev().text(function(i, t) {
    return parseInt(t, 10) + 1;
});

如何使用jQuery在页面中添加一个值？

1 个答案: