多個滑塊和平均

我需要顯示10滑塊範圍分鐘：最後一個（第10）是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"));

而對於平均我已經重複相同的碼也和修改的值變更ID重複相同的碼9時間（是最佳）：

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日）一點兒也不變化，我注意到，我的網頁是有點重。

是否有任何其他意思，使與優化的代碼是一回事嗎？

我會很感激

來源

2012-09-20 ranell

「我已經重複了9次相同的代碼（這是最佳嗎？）」根本不是。 – j08691

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-20 19:57:52 Shmiddty

它就像一個魅力:)感謝很多！ – ranell

我試圖顯示每個滑塊對應的數量，它的工作原理，但它不穩定：/ var val = 0，j = 1，len = sliders.length; （功能（i，ele）{ \t \t \t \t $（「＃amount」+ j）.text（$（ele）.slider（「option」，「value」））; val + = $ （ele）.slider（「option」，「value」）; \t \t \t j ++; }）; HTML：

– ranell

你可以使用CSS3招這樣的：http://jsfiddle.net/YPWY8/1/ – Shmiddty

這個怎麼樣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 
});

來源

2012-09-20 19:59:50 j08691

+1用於縮小和演示。 – undefined

這幾乎是我要找的，非常感謝！ – ranell

多個滑塊和平均

回答

相關問題