Question

我试图在物品搬迁时扭转我的大价。目前，当我删除一个项目时，我设置了grand total to 0。

如果我有

benz - 150

bmw -  100  //with quantity of 2 meaning bmw price is 50

total  - 250

但是当我从列表中删除宝马时，

我应该得到这样的东西

benz - 150

total - 150

如果取消选择项目，如何通过将总价格反转到之前的价格来实现这一目标？

function calc(goods) {

  var product = JSON.parse(goods.dataset.goods);
  if (goods.checked == true) {
    $('.panel').append(
      '<div class="container"> ' +
      '<p  class="name" >' + product.name + '</p>' +
      '<p  class="price" data-price="' + product.price + '">' + product.price + '</p>' +
      '<p class="total" ><span class="sub-total" name="sub-total" id="sub-total"></span></p>' +
      '<input  type="text" class="form-control quantity"  placeholder=" qty " name="quantity[]"  required/>' +
      '</div>'
    )
  } else {
    $(".panel .container [data-id=" + product.id + "]").parent().remove();
    $('.mygoods span').text(0);
  }
}

$('.panel').on('keyup', '.quantity', function() {
  var container = $(this).closest('div');
  var quantity = Number($(this).val());
  var price =
    Number($(this).closest('div').find('.price').data('price'));

  container.find(".total span").text(quantity * price);
  sum = 0;

  $(".sub-total").each(function() {
    sum = sum + Number($(this).text());
  })

  $('.mygoods span').text(sum);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="mygoods">GrandTotal <span></span></p>
</div>

<input onclick="return calc(this)" data-good="{{$good->toJson()}}" type="checkbox" />

当我取消选择某个项目时，即使我将总数加起来，旧文本也始终为0 的更新

 function calc(goods) {

  var product = JSON.parse(goods.dataset.goods);
  if (goods.checked == true) {
    $('.panel').append(
      '<div class="container"> ' +
      '<p  class="name" >' + product.name + '</p>' +
      '<p  class="price" data-price="' + product.price + '">' + product.price + '</p>' +
      '<p class="total" ><span class="sub-total" name="sub-total" id="sub-total"></span></p>' +
      '<input  type="text" class="form-control quantity"  placeholder=" qty " name="quantity[]"  required/>' +
      '</div>'
    )
  } else {
    var total = $(".panel .container [data-id=" + product.id + "]").parent().find(".total").text();

    $(".panel .container [data-id=" + product.id + "]").parent().remove();

 if (total) {
        $('.mygoods span').text(function(oldtext) {
            console.log('this is my old text '+oldtext)
            return oldtext ? oldtext - total : oldtext;

        });
    }

  }
}

Answer 1

在删除包含该产品小计的元素之前，请获取.total span元素的文本，然后从总计中减去该元素。

  } else {
    var total = $(".panel .container [data-id=" + product.id + "]").parent().find(".total").text();
    $(".panel .container [data-id=" + product.id + "]").parent().remove();
    if (total) {
        $('.mygoods span').text(function(oldtext) {
            return oldtext ? oldtext - total : oldtext;
        });
    }
  }

Answer 2

纯粹的js方法;

window.onload = assignEventListener();

function assignEventListener() {
let allCheckBoxes = document.querySelectorAll("input[type='checkbox']");
let grandTotal = 0;
   for(i=0;i<allCheckBoxes.length;i++) {
      allCheckBoxes[i].onchange = function() {
      	checkedBoxesSum(allCheckBoxes,grandTotal);
      }   		
   }   
}

function checkedBoxesSum(allCheckBoxes,grandTotal) {
 //let allChecked = document.querySelectorAll("input[type='checkbox']");
 for(i=0;i<allCheckBoxes.length;i++) {
  if(allCheckBoxes[i].checked == true) {  
      grandTotal += parseInt(allCheckBoxes[i].getAttribute('value'));
  }
}
 document.getElementById("Grandtotal").innerHTML = "GrandTotal is "+ grandTotal
}

<input type="checkbox" id="bmw" value="150"/> BMW
<input type="checkbox" id="mercedes" value="300"/> Mercedes
<input type="checkbox" id="audi" value="400"/> Audi
<div id="Grandtotal">

</div>

取消选中框并修改总计 - JS

2 个答案: