如何同步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输入类型=“范围”（滑块）项目？

回答

相关问题