0

我需要显示 10 个滑块范围最小值：最后一个（第 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 个）的值在现场没有改变，我注意到我的页面有点重。

还有其他方法可以用优化的代码做同样的事情吗？

我会非常感谢

4

2 回答 2

2

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>
于 2012-09-20T19:57:52.487 回答
2

这个jsFiddle 示例怎么样？

$(".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
});
​
于 2012-09-20T19:59:50.273 回答