javascript - 如何自动添加三个 bootstrap 输入滑块的总和？

我有一个应用程序试图添加三个引导程序滑块的总和：

<div id="evalOne" class="qrow">
    <div id="q1" class="question q_space">
        <p>Question 1:</p>
    </div>
    <div id="a1" class="question a_right">
        <input id="question1" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="0"/>
        <span class="CurrentSliderValLabel"><span id="question1Val" class="questionVal">0</span></span>
     </div>
</div>
<div id="evalTwo" class="qrowa">
    ...
</div>
<div id="evalThree" class="qrow">
    ...
</div>

<div id="FinalAnswer" class="qrow">
    ...
    <span class="CurrentSliderValLabel">Total:<span id="myTotal" class="answerVal">0</span></span>

...


这是我尝试过的：
参见编辑

编辑部分

我想说明使用范围作为值的原因。根据example 6 in the documentation范围确实有一个值

$("#question1").slider({step:1, min:0, max:3});
    $("#question1").on('slide', function (slideEvt1) {
    $("#question1Val").text(slideEvt1.value);
});

进一步查看文档，我想知道如果将总和添加到实际的幻灯片事件中会发生什么

$("#question1").on('slide', function (slideEvt1) {
        $("#question1Val").text(slideEvt1.value);
        $("#myTotal").text(sum = parseInt(slideEvt1.value));
    });

    $("#question2").slider({ step: 1, min: 0, max: 3 });
    $("#question2").on('slide', function (slideEvt2) {
        $("#question2Val").text(slideEvt2.value);
        $("#myTotal").text(sum += parseInt(slideEvt2.value));
    });

这会更改跨度答案总和，但是除非我从+中删除​​sum+=，否则它不是按3的整数计数。但是，如果删除+，则下一个滑块将不总计，而是重新开始计数。

最佳答案

这超出范围..做这样的事情..

$(document).ready(function () {
        //this should calculate values automatically
        // calculateSum(); <-- remove that

        $(".questionVal").on("change", function () {
            calculateSum(this);
        });
    });

    function calculateSum(obj) {
        var sum = 0;
        $(".questionVal").each(function () {
            sum += parseInt(obj.value);
        });

        $("span#myTotal").val(sum.toFixed(0));
    }

然后将questionVal类移至输入，因为span元素没有value属性。


这有效..
http://jsfiddle.net/h3WDq/1048/

<span class="questionVal">0</span><span class='res'>0</span><br>
<span class="questionVal">0</span><span class='res'>0</span><br>
<span class="questionVal">0</span><span class='res'>0</span><br>
<span class="questionVal">0</span><span class='res'>0</span><br>
<span class='total'>0</span>


$('.questionVal').slider();
$('.questionVal').on("slide", function(e){
    $(this).next().text(e.value);
  var totes = 0;
  $(".res").each(function(){
    totes += parseInt($(this).text());
  });
  $(".total").text(totes);
});