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

【问题标题】：How can I synchronize html 5 input type="range" (slider) items?如何同步 html 5 输入类型 =“范围”（滑块）项目？
【发布时间】：2013-03-12 20:40:24
【问题描述】：

我有以下 html，包含 3 个 html5 input="range" 项，我将其称为滑块。 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)，然后将该数量平均分配给其他 2 个滑块中的每一个。

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

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

【问题讨论】：

请注意，不推荐$().ready，我建议使用$(document).ready。 api.jquery.com/ready如果要缩短，请使用$(function(){...})
@Kevin B - 感谢您的评论，我会记住的！
计算需要发生的总变化量，然后在两者之间平均分配。当两者中的一个已满时，然后将该更改的其余部分推到另一个。例如，如果滑块 1 位于 50，两个位于 20，3 位于 30，并且您将 1 减少到 10，则 2 和 3 都应分别增加 20，导致10/40/50 这就是它背后的逻辑，现在只是将其转换为代码。我不会使用 $.each

标签： jquery html input

【解决方案1】：

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

【讨论】：