Question

我正在尝试总结从jQuery中的json get请求获取的值。相反，它会继续替换值，而不是对变量total求和。

请问我如何总结每次点击的价值？

在这里输入我的代码

$(".checks").on("click", function(){
  var clicked = $(this);
  var room = clicked.val();
  var total = 0;

  if(this.checked) {
    $.get('/rooms.json', function(data){ 
      data.forEach(function(d){
        if(room == d.id){
          total += parseInt(d.room_type.price);
          $("#selected_rooms").append("<p>" + d.number + " @ " + d.room_type.price + "</p>");
          $("#total_amount").html("<p>" + total + "</p>");
        }
      });
    });
  } else {
    $("#selected_rooms").
  }
});

Answer 1

您必须在total事件处理程序之外初始化click变量。

var total = 0;
$(".checks").on("click", function(){
  var clicked = $(this);
  var room = clicked.val();

  $.get('/rooms.json', function(data){ 
    data.forEach(function(d){
      if(room == d.id){
        total += parseInt(d.room_type.price);
        $("#selected_rooms").append("<p>" + d.number + " @ " + d.room_type.price + "</p>");
        $("#total_amount").html("<p>" + total + "</p>");
      }
    });
  });
});

Answer 2

由于您已在事件处理函数中声明了变量total，因此每次点击都会声明一个值为total的新变量0。

在点击事件处理函数之外声明变量total，该变量将保留先前的值：

var total = 0;
$(".checks").on("click", function(){
 .........

如果未选中该复选框，则要删除html，可以使用.html('')：

else {
  $("#selected_rooms").html('')
}

根据我所了解的更新，您希望清除每次单击中的元素。为此，您根本不需要else部分。只需清除条件之前每次点击中的元素即可：

完整代码：

var total = 0;
$(".checks").on("click", function(){
  var clicked = $(this);
  var room = clicked.val();
  $("#selected_rooms").html('');

  if(this.checked) {
    $.get('/rooms.json', function(data){ 
      data.forEach(function(d){
        if(room == d.id){
          total += parseInt(d.room_type.price);
          $("#selected_rooms").append("<p>" + d.number + " @ " + d.room_type.price + "</p>");
          $("#total_amount").html("<p>" + total + "</p>");
        }
      });
    });
  }
});

来自onclick的总和获取每个jquery的请求

2 个答案: