計算多個范圍 slider 值

Question

我正在嘗試從 3 個范圍 slider 計算價格，但是它返回錯誤的結果，我到目前為止嘗試過：

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