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

Question

我正在尝试计算多个jQuery范围滑块的总和。 涉及到stackoverflow的结果很多，多数不是我想要完成的，其他示例以2个滑块为例，当我尝试添加更多滑块时会中断（不确定我实际上在做什么） ..

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

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

http://jsfiddle.net/DULYW/2/

---

这是我要使用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，您需要确保将代码放入适当的page事件中，以便创建小部件。 因此，如果您的滑块位于data-role = page div中且具有id =“ page1”，则可以处理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);
}

演示

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);
}

感谢您的帮助，您对我的帮助很大。