Question

我需要显示10个slider-range-min：最后一个（第10个）是其他9个滑块的平均值。

为此我通过每次更改id重复相同的代码9次（最佳？）

 $( "#slider-range-min9" ).slider({
                range: "min",
                value: 10,
                min: 1,
                max: 20,
                slide: function( event, ui ) {
                    $( "#amount9" ).text( "$" + ui.value );
                }
            });

$( "#amount9" ).text( "$" + $( "#slider-range-min9" ).slider( "value" ) );

对于平均值，我也重复了相同的代码并修改了值：

value: (($( "#slider-range-min1" ).slider( "value" )+$( "#slider-range-min3" ).slider( "value" )+$( "#slider-range-min2" ).slider( "value" )+$( "#slider-range-min4" ).slider( "value" )+$( "#slider-range-min5" ).slider( "value" )+$( "#slider-range-min6" ).slider( "value" )+$( "#slider-range-min7" ).slider( "value" )+$( "#slider-range-min8" ).slider( "value" )+$( "#slider-range-min9" ).slider( "value" ))/9),

问题是这个滑块（第10个）的值在现场没有变化，我注意到我的页面有点重。

使用优化的代码是否还有其他意思可以做同样的事情？

我会非常感激

Answer 1

http://jsfiddle.net/YPWY8/

$(".slider").slider({
    range: "min",
    value: 10,
    min: 1,
    max: 20,
    slide: function( event, ui ) {
        if ($(this).hasClass("avg")){
            event.preventDefault();
            return false;
        }

        var sliders = $(".slider:not(.avg)");
        var val = 0, len = sliders.length;
        sliders.each(function(i, ele){
            val += $(ele).slider("option", "value");
        });

        var newVal = Math.round(val/len);

        $(".slider.avg").slider("option", "value", newVal);
    }
});

HTML

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider avg"></div>

Answer 2

jsFiddle example 怎么样？

$(".slider").slider({
    range: "min",
    value: 10,
    min: 1,
    max: 20,
    slide: function(event, ui) {
        var avg = 0;
        $('.slider').each(function() {
            avg += $(this).slider('value');
        });
        $("#amount9").text("$" + avg / 9);
        $("#slider-range-min10").slider('value',avg/9);
    }
});

$("#slider-range-min10").slider({
    range: "min",
    value: 10,
    min: 1,
    max: 20
});

多个滑块和平均值

2 个答案: