Question

有许多使用jQuery滑块并运行最大累计总数的示例。但是，我没有成功起草适用于我的应用程序的版本。我需要能够使用jQuery滑块设置6个openlayers图层的单个不透明度，同时永远不会超过累计100个滑块单位。

的更新

以下是我目前正在实施的方式。我不能为我的生活弄清楚如何进行代码重构，以便减少代码重复......

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

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

$(function() {
    $("#one").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_1.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#two").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_2.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#three").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_3.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#four").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_4.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#five").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_5.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#six").slider({
        range: "min",
        min: 0,
        value: 8,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_6.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
});
});

原始

我最熟悉的例子发布在这里和下面 http://jsfiddle.net/markieta/cWyQ3/

var sliders = $("#sliders .slider");
sliders.each(function() {
    var value = parseInt($(this).text()),
        availableTotal = 100;
    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 100,
        range: "min",
        animate: true,
        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);
                t.slider('value', value);
            });
        }
    });
});

最初，我使用的是设置OpenLayers图层的不透明度每个唯一滑块的滑动事件期间的setOpacity方法。但是，我无法弄清楚如何保持运行总计方法，因为我的滑块不会超过100个累积单位。

$(function() {
    $( "#slider1" ).slider({
    range: "min",
    min: 0,
    value: opacities[0],
    slide: function(e, ui) {
        hii_1.setOpacity(ui.value / 100);
        $( "#amount1" ).val( ui.value );
        }
    });
    $("#amount1" ).val($( "#slider1" ).slider( "value" ) );
});

** x6滑块**

有什么见解？

Answer 1

如果slide callback returns false，则拇指不会移动：

根据ui.value返回false以阻止幻灯片。

所以你需要做的就是获取其他滑块的总值，添加当前滑块的新值，如果它太高则返回false：

slide: function(event, ui) {
    var total = ui.value;
    // sliders is all the sliders, we skip `this` because
    // we need to get the current value from ui.value as
    // above.
    sliders.not(this).each(function() {
        total += $(this).slider("option", "value");
    });
    if(total > availableTotal) // availableTotal is your max across all sliders
        return false;
    //...
}

演示：http://jsfiddle.net/ambiguous/QWYzm/

jQuery滑块setOpacity单个OL层，同时保持最大累积总数

的更新

原始

1 个答案: