Question

我试图计算多个jQuery范围滑块的总和。 stackoverflow上有很多结果，大多数都不是我想要完成的，而其他人则以2个滑块为例，当我尝试添加更多时，它会中断（不确定我在做什么） ..

这是我所拥有的，6个滑块，然后我希望它计算最后一个之后的总体评级。 http://fasterforms.com/images/111914.png

这是一个工作小提琴，但正如我所说，当我尝试添加到示例时它会中断，或者它是用于“文本”输入，当我将它作为jQuery“范围”输入时它不会工作

这是我使用2个滑块的最接近的一个，但是当我尝试根据代码添加更多时，它也不起作用。

 <script type="text/javascript"> 
 function calc(A,B,SUM) { 
 var one = Number(A); 
 if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } 
 var two = Number(document.getElementById(B).value);  
 if (isNaN(two)) { alert('Invalid entry: '+B); two=0; } 
 document.getElementById(SUM).value = one + two; 
 } 
 </script> 

Enter a number: 
     <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" type="range" min="0" max="5" data-highlight="true" /> 
and another number: 
     <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" type="range" min="0" max="5" data-highlight="true" /> 
Their sum is: 
     <input name="sum" value="" id="result" readonly style="border:0px;">

总是看起来对我来说正常工作的东西总是在我将它添加到我的jQuery移动页面时拒绝以相同的方式工作，任何帮助都会很棒。

Answer 1

http://jsfiddle.net/DULYW/60/

添加更改事件：

<强> JS：

$('.add').change(function(){
  var sum = 0
  $('.add').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('#total').html(sum);
})

<强> HTML：

<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<p id="total"></p>

Answer 2

对于jQuery mobile，您需要确保将代码放在适当的页面事件中，以便创建窗口小部件。因此，如果您的滑块位于带有id =＆＃34; page1＆＃34;的data-role = page div中，您可以处理pagecreate事件，并在其中运行addAll以获取初始总数，然后添加更改处理程序每个也运行addAll函数的滑块：

$(document).on("pagecreate", "#page1", function () {
    $(".add").on("change", function () {
        addAll();
    });

    addAll();
});

function addAll() {
    var sum = 0
    $('.add').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total').html(sum);
}

<强> DEMO

Answer 3

两者都为我工作，但我最终将我改为ezankers编码因为它允许我有不同的名字而且他们不必完全相同。

http://jsfiddle.net/ezanker/DULYW/61/

    $(document).on("pagecreate", "#page1", function () {
    $(".add").on("change", function () {
        addAll();
    });

    addAll();
});

function addAll() {
    var sum = 0
    $('.add').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total').html(sum);
}

感谢您的帮助，您帮助了我很多。

计算多个输入的总和 - jQuery Range Slider

3 个答案: