提问者:小点点

计算多范围滑块值


我试图计算价格从3范围滑块,但它返回错误的结果,我所尝试的:

null

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>$

null

我想要所有范围的总数,但它返回单个总数。 我做错了什么?


共1个答案

匿名用户

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

null

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>$