Question

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

情况： 想要使用滑块控制器来选择可以占据房间内的成人，儿童，婴儿的数量。例如，一个可容纳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扩展插件，使其能够处理任何元素选择并设置定义主滑块的属性。这个逻辑可能不是最好的，这就是为什么我需要好的想法，如果可能的话，还有一些功能可以让滑块作为组一起工作。

请建议我使用任何好方法。

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

这将特别适用于您提供的示例 - 它在成人滑块上设置最小数量，同时使得无法选择将导致合计总数超过availableTotal变量的值。

有关详细信息，请参阅此简单演示：http://jsfiddle.net/yijiang/RsZYZ/

Answer 2

我认为解决方案是使用这样的幻灯片事件：

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

然后是方法选项：

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

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

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

你有这里的文件： http://jqueryui.com/demos/slider/

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

2 个答案: