javascript - 如何自动添加三个 Bootstrap 输入 slider 的总和？

Question

我有一个应用程序，我试图添加三个 Bootstrap slider 的总和:

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

这会更改跨度答案总数，但不是按 3 计数，而是以指数方式计数，除非我从 sum+= 中删除 +。但是，如果我删除 + ，下一个 slider 将不会总计到计数中，相反，计数将重新开始。

Answer 1

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

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