如何同步html 5輸入類型=「範圍」（滑塊）項目？

我有以下html，包含3個html5 input =「range」項目，我將調用滑塊。該html也有一個span標籤來顯示每個滑塊的值。每個跨度代碼顯示一個百分比數量，其中3個總計爲100％。如何同步html 5輸入類型=「範圍」（滑塊）項目？

HTML：

<div class="container"> 
    <input type="range" class="slider" id="r1" value="70" /><span id="s1"></span><br /> 
    <input type="range" class="slider" id="r2" value="20" /><span id="s2"></span><br /> 
    <input type="range" class="slider" id="r3" value="10" /><span id="s3"></span><br /> 
    <input type="hidden" class="placeholder" /> 
</div>

我已經寫了我使用更新不被改變的2個滑塊下面的jQuery代碼，因爲任何一個滑塊被改變。代碼保持在同步跨度標籤的所有值，其調整滑塊沒有被改變，因此所有三個的總和爲100

jQuery的兩個：

<script type="text/javascript"> 
    $().ready(function() { 

     //set the initial values for the spans 
     var sliders = $('.slider'); 
     sliders.each(function (index, element) { 
      var slider = $(this); 
      slider.next('span').text(element.value); 
     }) 

     $('.container').on('change', '.slider', function() { 
      var slider = $(this); 
      var sliderId = this.id; 
      var amount = this.value; 
      slider.next('span').text(amount); 

      //Iterate over the sliders that are not being changed, and update them 
      var sliders = $('.slider'); 
      var sliderCount = sliders.length; 
      var otherSlidersCount = sliderCount - 1; 
      sliders.each(function (index, element) { 
       var x_id = this.id; 

       if (x_id != sliderId) { 
        var totalChangeAmount = 100 - amount; 
        var sliderChangeAmount = totalChangeAmount/otherSlidersCount; 
        this.value = sliderChangeAmount; 
        $(this).next('span').text(sliderChangeAmount); 
       } 

      }) 

     }); 
    }); 
</script>

這是一個帶的jsfiddle工作代碼：

jsfiddle

我的問題是，我只是瓜分從變更用滑塊改變的百分比由其他滑塊（2）的計數，然後同樣在分配這些量其他每一個呃2個滑塊。

我需要對其進行更改，以便每個不變滑塊的跨度值相對於其現有值發生變化。例如，如果我將滑塊1從70增加到80，那麼滑塊2應該減少5到15，並且滑塊3也應該減少5到5（總共100％）。

任何人都可以幫助建議如何做到這一點？

來源

2013-03-12 Russ Clark

請注意，不建議使用'$（）。ready'，我建議使用'$（document）.ready'。 http://api.jquery.com/ready如果你想縮短它，使用'$（function（）{...}）' – 2013-03-12 20:42:34

@Kevin B - 感謝您的評論，我會牢記這一點！ – 2013-03-12 20:44:33

計算需要發生的總變化量，然後在兩者之間平均分配。當其中一個滿了時，將其餘部分推到另一個。例如，如果滑塊1在'50'處，兩個在'20'處，在'30'處爲3，並且你將'1'減少到'10'，那麼2和3都應該分別增加'20'，導致'10/40/50'這就是它背後的邏輯，現在只是把它轉換成代碼。我不會使用$ .each – 2013-03-12 20:45:01

最好的辦法是跟蹤最近最少使用的滑塊並只更新其值。這是相當多的編碼，特別是如果你只有3個滑塊，但它可以讓你做任何事情。

來源

2013-04-24 03:50:09 Mikhail

如何同步html 5輸入類型=「範圍」（滑塊）項目？

回答

相關問題