JS计算变更总额

JS Calculate total on change

本文关键字：计算 JS      更新时间：2023-09-26

我有这个脚本，当用户从下拉列表中选择一些值时，它会计算这些值的总数。我不是JS的专家。除了onchange，我还想用这段代码来计算页面加载的值？我认为这是对函数和if语句进行修改后的代码的复制和粘贴？

<script>
$(function() {
     $(".DropChange").change(function(){
        var valone = $('#ValOne').val();
        var valtwo = $('#ValTwo').val();
        var valthree = $('#ValThree').val();
        var valfour = $('#ValFour').val();
        var valfive = $('#ValFive').val();
        var valsix = $('#ValSix').val();
        var valseven = $('#ValSeven').val();
        var valeight = $('#ValEight').val();
        var total = ((valone * 1) + (valtwo * 1) + (valthree * 1) + (valfour * 1) + (valfive * 1) + (valsix * 1) + (valseven * 1) + (valeight * 1));
        $('#Total').text(total);
    });
});
</script>

可能最简单的选择是将当前的onchange函数粘贴到另一个函数中。

var calculateTotals = function(){    
    var valone = $('#ValOne').val();
    var valtwo = $('#ValTwo').val();
    var valthree = $('#ValThree').val();
    var valfour = $('#ValFour').val();
    var valfive = $('#ValFive').val();
    var valsix = $('#ValSix').val();
    var valseven = $('#ValSeven').val();
    var valeight = $('#ValEight').val();
    var total = ((valone * 1) + (valtwo * 1) + (valthree * 1) + (valfour * 1) + (valfive * 1) + (valsix * 1) + (valseven * 1) + (valeight * 1));
    $('#Total').text(total);
};

然后将onchange更改为

$(".DropChange").change(calculateTotals);

所以你的$(function(){ ... });现在看起来像；

$(function(){
    $(".DropChange").change(calculateTotals); // assign event
    calculateTotals(); // calculate totals on load
});

以下是您需要的：

<script>
(function() {
     $(document).ready(function(){
        showSum();
      });
      $(".DropChange").change(function(){
          showSum();
      }
      function showSum(){
            var valone = $('#ValOne').val();
            var valtwo = $('#ValTwo').val();
            var valthree = $('#ValThree').val();
            var valfour = $('#ValFour').val();
            var valfive = $('#ValFive').val();
            var valsix = $('#ValSix').val();
            var valseven = $('#ValSeven').val();
            var valeight = $('#ValEight').val();
            var total = ((valone * 1) + (valtwo * 1) + (valthree * 1) + (valfour * 1) + (valfive * 1) + (valsix * 1) + (valseven * 1) + (valeight * 1));
        $('#Total').text(total);
      }
}());
</script>
相关文章：