0

10個のslider-range-minを表示する必要があります。最後の1つ（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 に答える