javascript - jQuery Slider - 如何根据另一个 slider 制作一组具有最大值的 slider ？

Question

这是一个困难的问题，我一直在努力让它发挥作用。它确实起作用了一半，但我认为逻辑是问题所在。下面我会解释一下情况和问题。

情况:想要使用 slider Controller 来选择房间内可以占用的成人、 child 、婴儿的数量。例如，一个可容纳 3 人的房间，用户可以使用 slider 进行选择，例如 1 名成人、2 名 child 和 0 名婴儿。但成人+ child +婴儿的总人数不得超过房间容量。下面起草了一些场景示例。

Room A with Capacity for 4 Pax and 1 Adult is required.
Adult/Child/Infant : 1/0/0 is less than 4 is OK
Adult/Child/Infant : 2/1/1 is equal to 4 is Ok
Adult/Child/Infant : 0/2/1 is less than 4 but NO Adult, therefore NOT OK

要使用 jQuery UI slider ，我必须为每种人员类型(成人/ child /婴儿)设置 3 个 slider ，并以总值(value)不超过房间容量的方式设置 slider 属性。

slider 不应允许，例如，如果房间容量为 4，其中成人 slider 值选择为 3， child 选择为 1，则婴儿 slider 不应能够将任何值设置为成人 + child 整个房间都挤满了，没有足够的空间容纳任何婴儿。或者，如果成人选择的最大值为 4，则 child 和婴儿的其他两个 slider 应该无法设置任何值，除非成人 slider 选择的值减小以留出 child 和婴儿的空间。

所以我的问题是编写 jQuery 扩展插件代码，使其能够处理任何元素选择并设置定义主 slider 的属性。这个逻辑可能不是最好的，这就是为什么我需要好的想法，如果可能的话，一些可以使 slider 作为组一起工作的功能。

请给我建议任何好的方法。

Answer 1

服用my answer from another question :代码应该如下所示:

var sliders = $("#sliders .slider"),
    smax = 4,
    smin = 0;

sliders.each(function() {
    var availableTotal = smax;

    $(this).empty().slider({
        value: 0,
        // Check - is this the adult slider? 
        min: (this.id === 'adult') ? 1 : smin,
        max: smax,
        range: 'min',
        step: 1,
        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);
            });
        }
    });
});

这将特别适用于您给出的示例 - 它设置成人 slider 上的最小金额，同时无法选择导致组合总数高于 availableTotal 变量的值。

请参阅这个简单的演示以了解更多详细信息:http://jsfiddle.net/yijiang/RsZYZ/