多Range Slider价格计算错误：为何仅返回单一项总价？

嘿，我一眼就看出问题出在哪了——变量作用域搞混啦！

问题根源 #

你一开始在全局作用域定义了result1、result2、result3，但在每个滑块的change事件处理函数里，又用let重新声明了这些变量：

// 全局变量
let result1 = 0; let result2 = 0; let result3 = 0;

// 事件里又重新声明，变成局部变量
$('input[name="cdnvideolive"]').change(function() { 
  let val = parseInt($(this).val()); 
  let price = 1000; 
  let result1 = price * val; // 这里的result1是局部变量，和全局的没关系！
  $('var').text(result1 + result2 + result3); 
});

这就导致事件函数里的result1只是当前函数内的局部变量，全局的result1始终是初始值0。每次计算总价时，另外两个未触发的滑块对应的全局变量还是0，所以最终显示的只有当前滑块的计算结果。

修复后的代码 #

我们只需要移除事件函数内的let声明，直接给全局变量赋值，再优化一下逻辑（提取公共计算函数，避免重复代码）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" name="cdnvideolive" value="1" min="1" max="50" data-steps="50">
<input type="range" name="cdnvideovid" value="1" min="1" max="20" data-steps="20">
<input type="range" name="cdnvideostor" value="1" min="1" max="30" data-steps="30">
total price: <var></var>$

<script>
let result1 = 0; 
let result2 = 0; 
let result3 = 0;

// 提取公共函数，统一计算并更新总价
function calculateTotal() {
  const total = result1 + result2 + result3;
  $('var').text(total);
}

$('input[name="cdnvideolive"]').change(function() { 
  let val = parseInt($(this).val()); 
  let price = 1000; 
  result1 = price * val; // 直接赋值给全局变量
  calculateTotal();
});

$('input[name="cdnvideovid"]').change(function() { 
  let val = parseInt($(this).val()); 
  let price = 2000; 
  result2 = price * val;
  calculateTotal();
});

$('input[name="cdnvideostor"]').change(function() { 
  let val = parseInt($(this).val()); 
  let price = 3000; 
  result3 = price * val;
  calculateTotal();
});

// 页面加载时先计算一次初始总价
calculateTotal();
</script>

额外优化说明 #

1. 新增了calculateTotal函数，把重复的总价计算和DOM更新逻辑抽离出来，代码更简洁易维护
2. 页面加载时调用一次calculateTotal，确保初始状态下就能显示正确的总价（默认三个滑块值都是1，初始总价应该是1000+2000+3000=6000）

这样修改后，三个滑块的数值变化都会正确更新全局变量，总价也会是三个滑块的计算结果之和啦！

内容的提问来源于stack exchange，提问作者Jack The Baker