Javascript jqueryslider-如何根据另一个滑块使一组滑块具有最大值？

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

情况： 要使用滑块控制器来选择房间内可以居住的成人、儿童、婴儿的数量。例如，一个可容纳3人的房间，用户可以使用滑块选择例如1名成人、2名儿童和0名婴儿。但是，用户的总人数不应超过成人+儿童+婴儿的房间容量。下面起草了几个场景示例

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滑块，我必须为每个人类型（成人/儿童/婴儿）设置3个滑块，并以总值不应超过房间容量的方式设置滑块属性

滑块不应允许，例如，如果房间容量为4，其中成人滑块值被选择为3，儿童被选择为1，则婴儿滑块不应能够设置任何值，因为成人+儿童已填满房间，并且没有任何婴儿空间。或者，如果选择成人的最大值为4，则儿童和婴儿的其他两个滑块应无法设置任何值，除非成人滑块选择的值减小，以便为儿童和婴儿留出空间

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

---

请向我推荐任何好的方法。

我认为解决办法是使用如下幻灯片活动：

$("#mainSlider").slider({
   slide: function(event, ui) { 
             //Insert logic here..
          }
});

然后选择方法选项：

$("#secondarySlider").slider("max", x);

设置由代码计算的其他滑块的最大值

这就是我解决UI部分的方法，然后您必须计算要设置的值

您在这里有文档：

---

我认为解决方案是使用如下幻灯片事件：

$("#mainSlider").slider({
   slide: function(event, ui) { 
             //Insert logic here..
          }
});

然后选择方法选项：

$("#secondarySlider").slider("max", x);

设置由代码计算的其他滑块的最大值

这就是我解决UI部分的方法，然后您必须计算要设置的值

您在这里有文档：

获取：代码应该如下所示：

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);
            });
        }
    });
});

这将特别适用于您给出的示例-它在成人滑块上设置了一个最小值，同时无法选择将导致组合总数超过

availableTotal

变量的值

有关更多详细信息，请参见此简单演示：

获取：代码应如下所示：

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);
            });
        }
    });
});

这将特别适用于您给出的示例-它在成人滑块上设置了一个最小值，同时无法选择将导致组合总数超过

availableTotal

变量的值

有关更多详细信息，请参阅此简单演示：