计算多个范围滑块值

Question

我试图从3范围滑块计算价格，但是它返回了错误的结果，到目前为止我尝试过：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;  $('var').text(result1 + result2 + result3);});$('input[name="cdnvideovid"]').change(function() {  let val = parseInt($(this).val());  let price = 2000;  let result2 = price * val;  $('var').text(result1 + result2 + result3);});$('input[name="cdnvideostor"]').change(function() {  let val = parseInt($(this).val());  let price = 3000;  let result3 = price * val;  $('var').text(result1 + result2 + result3);});<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>$我想要所有范围的总数，但它返回单个总计。我做错了什么？

Answer 1

您需要使用全局结果，并且范围必须从零开始。

let result1 = 0;

let result2 = 0;

let result3 = 0;

$('input[name="cdnvideolive"]').change(function() {

  let val = parseInt($(this).val());

  let price = 1000;

  result1 = price * val;

  $('var').text(result1 + result2 + result3);

});

$('input[name="cdnvideovid"]').change(function() {

  let val = parseInt($(this).val());

  let price = 2000;

  result2 = price * val;

  $('var').text(result1 + result2 + result3);

});

$('input[name="cdnvideostor"]').change(function() {

  let val = parseInt($(this).val());

  let price = 3000;

  result3 = price * val;

  $('var').text(result1 + result2 + result3);

});

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

<input type="range" name="cdnvideolive" value="0" min="0" max="50" data-steps="50">

<input type="range" name="cdnvideovid" value="0" min="0" max="20" data-steps="20">

<input type="range" name="cdnvideostor" value="0" min="0" max="30" data-steps="30">

total price: <var></var>$