多个 jQuery-UI 滑块的总和

问题描述

我正在尝试实现一个页面，其中有 4 个 jQuery-UI 滑块，并且我想让所有 4 个滑块的总和永远不会超过 400.

I'm trying to implement a page where there are 4 jQuery-UI sliders, and I want to make it so the combined total of all 4 sliders will never go over 400.

我不介意这是以哪种方式实现的，它可以从 0 开始，一旦您更改 1 个滑块，剩余的可用总数就会减少，或者将滑块设置为超过最大值，就会降低另一个滑块的值滑块.

I don't mind which way this is implemented, it can be from a 0 start, and as soon as you change 1 slider, the remaining available total decreases or setting a slider past the maximum, decreases the values on the other sliders.

附:滑块以 10 为增量.

P.S. The sliders go in increments of 10.

所有的想法和欢迎提出建议，如果您想测试，我已经设置了 jsFiddle.

All ideas & suggestions are welcome, and I've set up a jsFiddle if you'd like to test.

推荐答案

来吧:

var sliders = $("#sliders .slider");

sliders.each(function() {
    var value = parseInt($(this).text(), 10),
        availableTotal = 400;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 400,
        range: "max",
        step: 10,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().text(ui.value);

            // Get current total
            var total = 0;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });

            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;

            var max = availableTotal - total;

            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");

                t.slider("option", "max", max + value)
                    .siblings().text(value + '/' + (max + value));
                t.slider('value', value);
            });
        }
    });
});

这是一个简单的演示:http://jsfiddle.net/yijiang/Y5ZLL/4/

这篇关于多个 jQuery-UI 滑块的总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！