如何使用它们的 ID 对元素求和？答案

【问题标题】：How to sum of elements by using their ID?如何使用它们的 ID 对元素求和？
【发布时间】：2021-06-14 12:24:22
【问题描述】：

我有多个带有 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中获取乘法值。

【问题讨论】：

嗨，为什么是 id ？它与类工作正常
你能说明你想要什么吗？
如果您只需要添加单个总数，您可以在每个循环中使用$(this).next().text(parseInt($(this).val()) * selector_next)
使用类可以，但是如何获取特定乘法的值？
在使用 jQuery 时为什么要使用 getElementById？ $('#actualtime').val()

标签： javascript html jquery input range

【解决方案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>

【讨论】：

@freedomn-m 他还使用parseInt 将"2.5" 转换为2。