Question

我有一个应用程序，我试图添加三个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>

...

以下是我的尝试： 请参阅修改

已编辑的部分

我想说明我使用span作为值的原因。根据{{3}} span确实有一个值

$("#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计数，而是按指数计算。但是，如果我删除+，则下一个滑块不会计入计数，相反，计数将重新开始。

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元素没有值属性..

<小时/> 这个工作.. 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);
});

如何自动添加三个引导输入滑块的总和？

1 个答案: