所有我的（jQuery UI）單個滑塊獲得相同的值

我希望當我滑動它們中的每一個時，同一頁面的每個滑塊都有它自己的值。所有我的（jQuery UI）單個滑塊獲得相同的值

當我滑動其中一個滑塊時，每個滑塊的「滑塊」按照計劃作爲條件背景顏色工作，但是對於所有滑塊而言，該值是相同的。

這裏是我的JS代碼：

$(document).ready(function() { 
    $('.slider').slider({ 
    value: 5, 
    min: 1, 
    max: 10, 
    step: 1, 
    slide: function(event, ui) { 
     $(".ui-slider-handle").text(ui.value); 
     switch(ui.value){ 
     case 1: { $(this).css('background', 'darkred'); break;} 
     case 2: { $(this).css('background', 'red'); break;} 
     case 3: { $(this).css('background', 'orange'); break;} 
     case 4: { $(this).css('background', 'gold'); break;} 
     case 5: { $(this).css('background', 'yellow'); break;} 
     case 6: { $(this).css('background', '#AAFF00'); break;} 
     case 7: { $(this).css('background', 'lime'); break;} 
     case 8: { $(this).css('background', 'cyan'); break;} 
     case 9: { $(this).css('background', '#00AAFF'); break;} 
     case 10: { $(this).css('background', 'blue'); break;} 
     } 
    } 
    }); 
    $(".ui-slider-handle").val($('.slider').slider("value")); 
});

而這裏的中的jsfiddle代碼：http://jsfiddle.net/Arkl1te/Wrq3H/

有沒有辦法解決呢？我感謝您的幫助！

來源

2013-05-21 Fabián

這並不是說它們具有相同的值，問題是每次發生幻燈片時都要更新兩個句柄。可能的解決辦法：http://jsfiddle.net/Wrq3H/3/

//change text for current's slider handle only 
     $(this).children(".ui-slider-handle").text(ui.value);

來源

2013-05-21 23:06:48 JayPea

是的，這是需要什麼 – foochow

有時我想知道我花了多少時間思考開關區域的外部部分...... xD –

您需要爲每個滑塊創建一個單獨的值參數。它們引用相同的變量，因此該步驟正在基於最新值應用於兩者。嘗試像這樣：

valueone = 5, 
valuetwo = 5, 
/* ... other content ... */ 

$(".ui-slider-handle").val($('#slider-1').slider("valueone")); 
$(".ui-slider-handle").val($('#slider-2').slider("valuetwo"));

來源

2013-05-21 23:04:14 foochow

而如何在一個頁面中有100個滑塊？對你而言，他需要爲每張幻燈片編寫相同的代碼行，這不是靈活的。 – Epsil0neR

是的，這個解決方案並不優雅。使用別人提到的兒童方法 – foochow

無論如何感謝您的意圖！ :) –

在您需要在您的選擇從元素與".ui-slider-handle"所有元素孩子改變滑動功能這引起了幻燈片事件：

$(this).children(".ui-slider-handle").text(ui.value);

這弄不好會允許你使用許多滑塊不改變功能的幻燈片例如http://jsfiddle.net/cVUp3/1/

來源

2013-05-21 23:10:26 Epsil0neR

所有我的（jQuery UI）單個滑塊獲得相同的值

回答

相關問題