如何使用元素的 ID 对元素求和？

Question

我有多个范围滑块及其 ID。我想使用他们的 ID 对输入求和。

范围滑块和输入的乘积。
最后是所有乘法的加法。

$(document).ready(function() {
  $(".range").on("change", function() {
    var mult = 0;
    $('.range').each(function() {
      var selector_next = document.getElementById("actualtime").value
      mult += parseInt($(this).val()) * selector_next //multply..
    })
    $("#addition").text(mult)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="actualtime"  value="2.5" disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider1"><span id="multiplication-1"></span><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider2"><span id="multiplication-2"></span><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider3"><span id="multiplication-3"></span><br>

<span id="addition"></span>

另外，获取span标签的乘法id中的乘法值。

Answer 1

您可以简单地遍历滑块并获取值并将其添加如下：

$(document).ready(function() {
  $('.range').on('change', function() {
    let total = 0;
    const multiplyFactor = parseFloat($('#actualtime').val());
    $('.range').each(function() {
      total += (parseFloat($(this).val()) * multiplyFactor);
    });
    
    $('#addition').text(total);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="actualtime"  value="2.5" disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider1"><span id="multiplication-1"></span><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider2"><span id="multiplication-2"></span><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider3"><span id="multiplication-3"></span><br>

<span id="addition"></span>

如何使用元素的 ID 对元素求和？

How to sum of elements by using their ID?

html

javascript

jquery

input

range