实时滑块输入和使用javascript在div上显示

Question

他们 我一直试图创建4个范围滑块，其值显示在右侧，并实时显示它们的总和。

我能做什么 -

1. 我创建了4范围滑块
2. 我在滑动时显示了它们的价值
3. 我有一些代码来总结它们。

我无法做什么

1. 我无法实时显示总和。

见下图：



这是我的代码：

<div id="slider">
<form oninput="amount.value=rangeInput.value; 
               amount2.value=rangeInput2.value;
               amount3.value=rangeInput3.value;
               amount4.value=rangeInput4.value;  
            " >

    <input name="one"     class="bar" type="range" id="rangeInput" value="0" onchange="rangevalue.value=value"/>
    <input name="two" class="bar" type="range" id="rangeInput2" value="0" onchange="rangevalue2.value=value"/>
    <input name="three" class="bar" type="range" id="rangeInput3" value="0" onchange="rangevalue3.value=value"/>
    <input name="four" class="bar" type="range" id="rangeInput4" value="0" onchange="rangevalue4.value=value"/>
    <span  class="highlight"></span>

     <output name="amount" for="rangeInput">0</output>
     <output name="amount2" for="rangeInput2">0</output>
     <output name="amount3" for="rangeInput3">0</output>
     <output name="amount4" for="rangeInput4">0</output>

    <br/>

Total:  <div id="total"></div>

     </form>
</div>


     <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $("#total").click(function(){
                var sum=$("#rangevalue").val()+$("#rangevalue2").val()+$("#rangevalue3").val()+$("#rangevalue4").val();
            });
        });
    </script>

有关如何实时显示汇总数据的任何帮助？所以当我移动滑块时总和会发生变化吗？

感谢。

Answer 1

您已经在使用jQuery，因此请删除内联事件处理程序并改为使用jQuery。

HTML中似乎没有rangevalue个元素，它们被称为rangeInput？

范围滑块上的连续更新事件是oninput事件。

然后，这只是解析数字并加起来的问题。

$(document).ready(function () {
    $('.bar').on('input', function () {
        var val1 = parseInt($("#rangeInput").val(), 10);
        var val2 = parseInt($("#rangeInput2").val(), 10);
        var val3 = parseInt($("#rangeInput3").val(), 10);
        var val4 = parseInt($("#rangeInput4").val(), 10);

        var sum =  val1 + val2 + val3 + val4;
        $('#total').text(sum)
    });
});

FIDDLE