我有多个重力形式的范围滑块.我想计算用户 Select 的总数并显示在屏幕上.JQuery可以工作,并且可以做它应该做的事情.

但是,我需要每个滑块的初始值为零,然后阻止它们超过$('.slider').val(0),但如果像其他地方建议的那样,使用jQuery将每个滑块的初始值设置为$('.slider').val(0),则#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" />

推荐答案

您可以使用重力表单中该字段的高级选项卡下的默认值将数字字段的初始值设置为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);
  });

Javascript相关问答推荐

JavaScript寻求、寻求和时间更新事件||Mux

IOS(React Native)中未找到模块SquareReaderSDK

如何在ReactJS中修复这种不需要的按钮行为?

nPM审计始终发现0个漏洞

Mongodb拥有5亿个文档,我想根据JavaScript驱动程序中的两个字段使用regEx进行搜索,而不是模式

成帧器运动中的运动组件为何以收件箱开始?

在JavaScript中声明自定义内置元素不起作用

D3 Scale在v6中工作,但在v7中不工作

成功完成Reducers后不更新状态

单击ImageListItemBar的IconButton后,在Material—UI对话框中显示图像

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗?没有SQL或任何数据库.只有HTML语言

我怎么在JS里连续加2个骰子的和呢?

如何创建返回不带`new`关键字的实例的类

当我在Reaction中创建一个输入列表时,我的输入行为异常

钛中的onClick事件需要在两次点击之间等待几秒钟

与svg相反;S getPointAtLength(D)-我想要getLengthAtPoint(x,y)

如何在一个对象Java脚本中获取不同键的重复值?

使用线性插值法旋转直线以查看鼠标会导致 skip

在JS/TS中将复杂图形转换为数组或其他数据 struct

如何在脚本编译后直接将RxJ模块导入浏览器(无需Angel、webpack、LiteServer)