我如何获得三组的总和？

如何解决我如何获得三组的总和？

这里我有三组范围滑块和输入。我想应用两件事。

范围滑块和输入的乘积。
最后是所有乘法的加法。
我对所有输入类型都有不同的 ID。

$(document).ready(function(){
  var t_sum=0;
  var rs=document.getElementById("range").value;
  var am=document.getElementById("amount").value;

  var k=0;
  $('.mul').each(function(){
        i++;
        var newID='multiplication-'+k;
        $(this).attr('id',newID);
        document.getElementById("multiplication").innerHTML = rs * am;
  })
  document.getElementById("addition").innerHTML= multiplication+k;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<input type="text" id="amount1" value="10" disabled ><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" id="amount2" value="20" disabled ><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" id="amount3" value="30" disabled ><br>

<input type="hidden" id="multiplication" class="mul">
Addition of all multiplication <input type="text" id="addition" value="" disabled >

我知道代码是错误的。

解决方法

您也可以为 amt 输入指定通用类，然后使用每个循环的 index 值来获取 amt 输入的值并将总数添加到您的加法输入中。

演示代码：

$(document).ready(function() {
  $(".range").on("change",function() {
    var mult = 0;
    $('.range').each(function(i) {
      var selector_next = parseInt($(".amt:eq(" + i + ")").val()) //get input value
      mult += parseInt($(this).val()) * selector_next //multply..
      console.log($(".amt:eq(" + i + ")").val(),$(this).val())
    })
    $("#multiplication").val(mult)
    $("#addition").val(mult)
  })
  $(".range:first").trigger("change")

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<!--added class-->
<input type="text" class="amt" id="amount1" value="10" disabled><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount2" value="20" disabled><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount3" value="30" disabled><br>

<input type="hidden" id="multiplication" class="mul"> Addition of all multiplication <input type="text" id="addition" value="addition" disabled>