使用jQuery计算多个范围滑块的值

q1qsirdb 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(110)

我有多个范围滑块在重力形式。我想计算用户选择的总数并显示在屏幕上。jQuery可以工作，并且做它应该做的事情。
然而，我需要每个滑块的初始值为零，然后停止它们超过100的总数，但是如果我使用jQuery将每个滑块的初始值设置为零，如其他地方所建议的那样，#total的值始终为零。如何将初始值设置为零，同时仍然获得#total以显示所有滑块值的总和？

$('.slider').on('change', function() {
  var sum = 0;
  $('.slider').each(function() {
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });
  $('#total').text(sum);
});

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

<p id="total"></p>
<input name="input_1" id="input_1_1" type="number" step="1" min="0" max="100" value="50" class="slider" />
<input name="input_2" id="input_1_2" type="number" step="1" min="0" max="100" value="50" class="slider" />
<input name="input_3" id="input_1_3" type="number" step="1" min="0" max="100" value="50" class="slider" />

jquery

来源：https://stackoverflow.com/questions/76474075/totaling-the-values-of-multiple-range-sliders-with-jquery

2条答案

按热度按时间

rta7y2nd1#

您可以使用Gravity Forms中字段的“高级”选项卡下的“默认值”将数字字段的初始值设置为0

$('.slider').val(0);
  $('.slider').on('change', function() {
    var sum = 0;
    $('.slider').each(function() {
      sum += parseInt($(this).val());
    });
    if (sum > 100) {//this will prevent the total from exceeding 100
      $(this).val($(this).val() - (sum - 100));
      sum = 100;
    }
    $('#total').text(sum);
  });

赞(0）回复(0）举报 2023-06-22

ajsxfq5m2#

不知道滑块是如何相关的，但

如果需要 “sliders”，请使用type="range"
缓存元素。在输入事件的每一个输入更改时都查询DOM，这不是高性能的。
在您的情况下，使用.reduce()将列表（数组或集合）缩减为不同的类型（Number
使用Math.min()将您的值限制为最大值100

const $slider = $(".slider");
const $total = $("#total");

$slider.on("input", () => {
  let sum = $slider.get().reduce((acc, el) => acc += parseInt(el.value ?? 0), 0);
  sum = Math.min(sum, 100);
  $total.text(sum);
});

<input name="input_1" type="range" min="0" max="100" value="0" class="slider" />
<input name="input_2" type="range" min="0" max="100" value="0" class="slider" />
<input name="input_3" type="range" min="0" max="100" value="0" class="slider" />
<p id="total"></p>

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

即使有了这个解决方案（因为你没有解释你实际上想要什么），让用户无用地滑动一些东西也是一个糟糕的UX-看到值结果在 100 处没有改变。我将把它留给您来确定实际的UI需求。

赞(0）回复(0）举报 2023-06-22

我来回答

使用jQuery计算多个范围滑块的值

2条答案

相关问题

热门标签

最新问答