0

我有以下 html，包含 3 个 html5 input="range" 项目，我将其称为滑块。html 也有一个 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%）。

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

4

1 回答 1

1

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

于 2013-04-24T03:50:09.980 回答