使用jQuery实现多滑块值求和：初始值设0后总和不显示的问题

问题根源 #

你设置滑块初始值为0后，#total始终显示0的原因是：初始化操作没有触发change事件，而你的总和计算逻辑只在change事件触发时才执行，所以页面加载后从未计算过总和。另外你需要的「总和不超过100」限制逻辑也需要补充进去。

修改后的完整代码 #

JavaScript 部分

// 抽离总和计算函数，方便重复调用
function calculateTotal() {
  let sum = 0;
  $('.slider').each(function() {
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });
  $('#total').text(sum);
}

$(document).ready(function() {
  // 初始化所有滑块值为0
  $('.slider').val(0);
  // 手动触发一次总和计算，确保页面加载后#total显示正确值
  calculateTotal();

  // 监听滑块值变化（input事件覆盖拖动过程，change覆盖手动输入后的确认）
  $('.slider').on('input change', function() {
    const currentSlider = $(this);
    let currentValue = parseFloat(currentSlider.val()) || 0;
    // 确保数值不小于最小值0
    currentValue = Math.max(0, currentValue);

    // 计算除当前滑块外的其他滑块总和
    let otherSum = 0;
    $('.slider').not(currentSlider).each(function() {
      otherSum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
    });

    // 限制总和不超过100：如果当前值+其他总和超出100，调整当前滑块的值
    if (currentValue + otherSum > 100) {
      currentValue = 100 - otherSum;
      currentSlider.val(currentValue);
    }

    // 更新总和显示
    calculateTotal();
  });
});

HTML 部分

<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="0" class="slider" />
<input name="input_2" id="input_1_2" type="number" step="1" min="0" max="100" value="0" class="slider" />
<input name="input_3" id="input_1_3" type="number" step="1" min="0" max="100" value="0" class="slider" />

关键改动说明 #

1. 抽离计算函数：把总和计算逻辑单独写成calculateTotal()，既可以在初始化时调用，也能在滑块变化时重复使用。
2. 初始化触发计算：设置初始值为0后，立刻调用calculateTotal()，保证#total页面加载后就显示正确的初始总和。
3. 实时监听事件：把事件从change改为input change，滑块拖动过程中就能实时更新总和，提升交互体验。
4. 总和限制逻辑：当用户调整滑块时，自动计算其他滑块的总和，若当前值加上其他总和超过100，会强制把当前滑块的值调整为100 - 其他总和，确保总合始终不超过100，同时保证数值不低于0。

内容的提问来源于stack exchange，提问作者jonnybigchunks