Question

我正在尝试创建一个成本计算器。基本上我在复选框输入中有值，当它们被检查时，它们是使用jQuery加在一起的。

$('.option').click(function() {
    var total = 0;
    $('.option:checked').each(function(){
        total += parseInt($(this).val());
    }); 
    $('.estimate').html('$' + total);
}); 

<input class="option" type="checkbox" value="1000"  />
<input class="option" type="checkbox" value="200"  />
<input class="option" type="checkbox" value="750"  />

所以在上面的例子中，总数将是1950.函数的那部分工作正常，但我想在等式中添加两个范围滑块。

<input class="range" type="range" min="0" max="3">
<input class="range" type="range" min="0" max="3">

滑块的4个位置中的每个位置都会增加添加到总计的值。如何将范围滑块位置添加到上述函数中？

这是jsFiddle：http://jsfiddle.net/2MLKc/

Answer 1

只需使用输入的更改事件：

http://jsfiddle.net/EfrainReyes/2MLKc/4/

$(document).ready(function() {

    var total;

    var addToTotal = function(){
        total += parseInt(this.value, 10);
    };

    var compute = function() {
        total = 0;
        $('.option:checked,.range').each(addToTotal);
        $('.estimate').text('$' + total);    
    };

    $('.option, .range').change(compute);
});

Answer 2

这是对你必须做的工作的简单改变。

$('input').change(function() {
  var total = 0;
  $('.option:checked').each(function(){
    total += parseInt($(this).val());
  }); 
  $('.range').each(function(){
    total += parseInt($(this).val());
  });
  $('.estimate').html('$' + total);
});

http://jsfiddle.net/6DbFH/

Answer 3

嗯，你可以做一些与复选框非常相似的事情。使用jQuery，您可以使用$（selector）.val（）。

获取滑块输入的值

但是我建议在另一个函数上抽象计算并从$（'。option'）调用它。单击（function（）...和$（'。range'）。change（function（）。 ..

如何使用成本计算器的范围输入为数字增加值？

3 个答案: