Question

我有以下html，包含3个html5输入=＆＃34;范围＆＃34;项目，我称之为滑块。 html还有一个span标签，用于显示每个滑块的值。每个span标记显示一个百分比金额，所有3个总计达到100％。

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>

我已经编写了以下jquery代码，用于更新未更改的2个滑块，因为任何一个滑块都在更改。代码保持span标签的所有值同步，调整两个滑块未被更改的值，以便三者之和为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），然后将该数量平均分配给其他两个滑块。

我需要更改它，以便每个不变的滑块的跨度值相对于其现有值进行更改。例如，如果我将滑块1从70增加到80，则滑块2应减少5到15，滑块3也应减少5到5（总共100％）。

任何人都可以提供有关如何完成此任务的建议吗？

Answer 1

最好的办法是跟踪最近最少使用的滑块并仅更新其值。它有相当多的编码，特别是如果你只有3个滑块，但它可以让你做任何事情。

如何同步html 5输入类型=“范围”（滑块）项目？

1 个答案: