如何使用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標籤調用url？

P.S.我現在使用0作爲佔位符。但我想實際添加一個到當前顯示的值。

Answer 1

問題是因爲this中$.ajaxsuccess處理程序不是被點擊的.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; 
});