Question

我有一个HTML范围控件，使用javascript将值传递回HTML类。

请参阅以下代码：

HTML

        <div class="userbox">
                <h3> Number of Users:&nbsp;&nbsp;&nbsp;<span class="usercount4">5</span><h3>
                <input type=range min=5 max=50  value="5" step=1 id=usercount4></input>
        </div>

        <div class="serverbox">     
                <h3> Number of Channels:&nbsp;&nbsp;&nbsp;<span class="servercount4">&nbsp;1</span><h3>
                <input type=range min=5 max=150  value="5" step=5 id=servercount4></input>                                                      
        </div>

        <div class="totalbox">  
                <h3>Total:&nbsp;&nbsp;&nbsp;<h3>
                <span class="total4">£30</span><p style="display: inline"> &nbsp;&nbsp;/ month</p>
        </div>

JAVASCRIPT

                    $(document).ready(function() {

                    var total4;
                    var count4 = $('#usercount4').val();
                    var addToTotal4 = function(){
                        total4 += parseFloat(this.value, 10);
                    };

                    var compute4 = function() {
                        total4 = 0;
                        $('.option4:checked ,#servercount4 ,#usercount4').each(addToTotal4);
                        $('.total4').text('£' + (total4 + ($('#usercount4').val()*5)-($('#usercount4').val())).toFixed(0));             
                    };

                    $('.option4, #servercount4 , #usercount4').change(compute4);

                    $('#usercount4').on('input', function(){
                        $('.usercount4').text($('#usercount4').val());

                    });

                    $('#servercount4').on('input', function(){
                        $('.servercount4').text($('#servercount4').val()/5);
                    });

                    $('#usercount4').on('input', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val()*5))));
                    });

                    $('#servercount4').on('input', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val()*5))));
                    });

                });

代码在Edge，Safari和Firefox上运行良好。但是在IE上，total4字段更新，但usercount4和servercount4字段没有。

这里可以看到一个工作演示（代码来自页面上最后一组范围控件）

www.yellowsand.co.uk/#telephony

非常感谢任何帮助。

Answer 1

试试：

                    $(document).ready(function() {

                    var total4;
                    var count4 = $('#usercount4').val();
                    var addToTotal4 = function(){
                        total4 += parseFloat(this.value);
                    };

                    var compute4 = function() {
                        total4 = 0;
                        $('.option4:checked ,#servercount4 ,#usercount4').each(addToTotal4);
                        $('.total4').text('£' + (total4 + (parseFloat($('#usercount4').val())*5)-(parseFloat($('#usercount4').val()))).toFixed(0));             
                    };

                    $('.option4, #servercount4 , #usercount4').change(compute4);

                    $('#usercount4').on('input change', function(){
                        $('.usercount4').text($('#usercount4').val());

                    });

                    $('#servercount4').on('input change', function(){
                        $('.servercount4').text(parseFloat($('#servercount4').val())/5);
                    });

                    $('#usercount4').on('input change', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val())*5)));
                    });

                    $('#servercount4').on('input change', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val())*5)));
                    });

                });

未使用变量count4。

你应该考虑重构你的代码！

IE Javascript值不更新

1 个答案: