Javascript 计算多个输入的总和-jQuery范围滑块

我试图计算多个jQuery范围滑块的总和。在stackoverflow上有很多结果，其中大多数都不是我想要实现的，还有一些显示了2个滑块作为示例，当我尝试添加更多的中断时（不确定我到底在做什么）

这是我所拥有的，6个滑块，然后我想让它在最后一个滑块之后计算整体评级。

这是一个有效的提琴，但正如我所说，当我尝试添加到示例中时，它会中断，或者它是用于“文本”输入，而当我将其设置为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;"> 

函数calc（A，B，SUM）{
var 1=数字（A）；
if（isNaN（one））{alert（'Invalid entry:'+A）；one=0；}
var two=编号（document.getElementById（B）.value）；
if（isNaN（two））{alert（'Invalid entry:'+B）；two=0；}
document.getElementById（SUM）.value=1+2；
} 
输入一个数字：
还有一个号码：
其总数为：

似乎任何对我正常工作的东西总是拒绝以同样的方式工作。一旦我将它添加到我的jQuery移动页面，任何帮助都会很棒。

附加更改事件：

JS:

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

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

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

HTML:

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

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

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

附加更改事件：

JS:

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

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

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

HTML:

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

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

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

对于jQuery mobile，您需要确保将代码放入适当的页面事件中，以便创建小部件。因此，如果您的滑块位于id为“page1”的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);
}

---

对于jquerymobile，您需要确保将代码放在适当的页面事件中，以便创建小部件。因此，如果您的滑块位于id为“page1”的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);
}

---

这两种方法都对我有用，但我最终还是改用了ezankers编码，因为它允许我有不同的名字，而且它们不必完全相同

---

谢谢你们两位的帮助，你们帮了我很多。

两位都为我工作，但我最终还是改用了ezankers编码，因为它允许我有不同的名字，而且它们不必完全相同

谢谢你的帮助，你帮了我很多