jquery - 如何使用 jQuery 将页面中的值加一？

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;
});

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

附注我现在使用 0 作为占位符。但我实际上想在当前显示的值上加一。

Answer 1

问题是因为 $.ajax success 处理程序中的 this 不是 .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;
});