javascript - 添加单独结果的结果

Question

提前感谢您的任何回复。我是 JavaScript 新手，在计算我需要的 2 个结果方面已经走了这么远。我的问题是如何将两个结果加在一起？

请看下面的第一个结果：

$(document).ready(function() {
    function checkSum(e) {
        var result = 0;
        $(".checksum").each(function() {
            var i = 0;
            if ($(this).val() != "") {
                i = parseFloat($(this).val());
            }

            result = result + i;
        });
        $("#resultsum").html(result * 60.60);
    }

    checkSum();
    $(".checksum").bind("keyup", checkSum);

});

这是第二个：

$(document).ready(function() {

    function checkSum2(e) {
        var result2 = 0;
        $(".checksum2").each(function() {
            var j = 0;
            if ($(this).val() != "") {
                j = parseFloat($(this).val());
            }

            result2 = result2 + j;
        });
        $("#resultsum2").html(result2 * 14.88);
    }
    checkSum2();
    $(".checksum2").bind("keyup", checkSum2);

});

标签： javascript

Answer 1

我已将您的代码段合并为一个，以删除您拥有的冗余代码。这种方法将允许您在将来添加更多校验和（.checksum3？），并确保您的计算逻辑对所有人都是相同的。

每当任何校验和发生变化时，结果都会计算到新元素中。试试下面的片段：

// function to calculate checksum
// used for both individual results as well as for total
function calcChecksum(elements) {
  let result = 0;
  elements.each( function(index, ele) {
      result = result + (parseFloat($(ele).val()) || 0)
  });
  return result;
}

// update total result
function updateTotal() {
  let total = calcChecksum($('.result'));
  $('#resultsum_total').val(total);
}


$(document).ready(function() {
  // generate function for each set of checksum inputs
  function genCheckSumFn(inputSel, outputSel, multiplier) {
    return () => {
      const result = calcChecksum($(inputSel));
      $(outputSel).val(result * multiplier);
      updateTotal();
    }
  }

    //checkSum bindings
    $(".checksum").bind("keyup", 
      genCheckSumFn('.checksum','#resultsum',60.60)
    );
  
    $(".checksum2").bind("keyup", 
      genCheckSumFn('.checksum2','#resultsum2',14.88)
    );
    
    // trigger initial calculation
    $(".checksum").trigger('keyup');
    $(".checksum2").trigger('keyup');
});

.checksum,
.checksum2{
 display: block;
}

.box {
  padding:10px 0px;
}

.box div {
  margin-top:5px;
}

.box.results input {
 color: #FFA500;
 border:0px;
 font-size: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box">
  Checksum
  <input class="checksum" value="10">
  <input class="checksum" value="5">
  Checksum(2)
  <input class="checksum2" value="20">
  <input class="checksum2" value="15">
<div>
<div class="box results">
<div> Resultsum: 
  <input id="resultsum" class="result" readonly>  </div>
<div> Resultsum(2): 
  <input id="resultsum2" class="result" readonly> </div>
<div> Resultsum(Total): <input id="resultsum_total" readonly> </div>
</div>