2016-05-12 16 views
1

我有一個HTML範圍控制,使用JavaScript傳遞值返回到一個HTML類。IE Javascript值不更新

請參閱下面的代碼:

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

       }); 

代碼工作在邊緣精細,Safari和Firefox。但在IE上總共4個字段更新,但usercount4和servercount4字段沒有。

的工作演示可以在這裏看到(代碼是從頁面上的最後一組範圍控制)

www.yellowsand.co.uk/#telephony

任何幫助極大的讚賞。

+0

http://stackoverflow.com/questions/17384218/jquery-input-event#17384341 – Bharadwaj

+0

謝謝,但我在測試IE 11,所以oninput事件應該是一個支持的功能 – user3580480

+0

我不這麼認爲,那裏無法保證IE可以爲任何標準工作。 – Bharadwaj

回答

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不被使用。

你應該真的考慮重構你的代碼!

+0

謝謝,但是你改變了什麼,提供的代碼看起來和原來的一樣?它也以相同的方式工作。在Edge上確定,但usercount4和servercount4值不更新。 – user3580480

+0

試試剛剛修改的代碼的新版本。我改變了一些計算操作。我認爲這可能是IE的問題,因爲有一些硬性轉換。但似乎這是不觸發的輸入事件。我添加了更改事件處理。我不知道它是否會完成這項工作.. – Gnucki

+0

謝謝你,工作!多謝。 – user3580480