計算多個輸入的總和-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);
}

感謝您的幫助，您對我的幫助很大。