如何获得三组的总加法？答案

【问题标题】：How do I get total addition of three group?如何获得三组的总加法？
【发布时间】：2021-06-09 12:29:55
【问题描述】：

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

范围滑块与输入相乘。
最后是所有乘法的加法。
我对所有输入类型都有不同的 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 >

我知道代码错了。

【问题讨论】：

标签： javascript html jquery slider range

【解决方案1】：

您也可以为您的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>

【讨论】：

我不确定 multiplication 输入的用途是什么 :)。
用于存储输入的数据，并获得所有输入乘法的加法。
这个回答你的问题还是我在这里遗漏了什么？
是的，答案是正确的，但为什么要使用`$(".range:first").trigger("change")`
要在页面加载时触发更改事件，如果您不想在页面加载时进行计算，可以将其删除。