jQuery ui多個滑塊混淆值

我正在使用一段時間的ui滑塊實用程序，並以下列情況結束。我有三個滑塊組合在一起，以便使用它們的結果並更改對象的CSS盒陰影。這是我的代碼：jQuery ui多個滑塊混淆值

$('#slider2, #slider3, #slider4').slider({ 
    range: 'min', 
    min: 0, 
    max: 100, 
    step: 1, 
    animate: true, 
    slide: function(x,y,z) { 
     var x = $('#slider2').slider('value'), 
      y = $('#slider3').slider('value'), 
      z = $('#slider4').slider('value') 
     $('#xShadowValue').val(x + ' px'); 
     $('#yShadowValue').val(y + ' px'); 
     $('#zShadowValue').val(z + ' px');   
     $('#target').css('box-shadow', x + 'px ' + y + 'px ' + z + 'px ' + '#888888'); 
    } 
}); 

$('#xShadowValue').val($('#slider2').slider('value') + ' px'); 
$('#yShadowValue').val($('#slider3').slider('value') + ' px'); 
$('#zShadowValue').val($('#slider4').slider('value') + ' px');

問題是當我改變第一個一切都很好。當我改變第二個時，第一個下降或增加一個單位，當我改變第三個發生的第二個。此外，我不能將它們全部滑動到0或100.相應的限制出現在1和99。提前Thanx。

來源

2012-02-27 Marios Fakiolas

我沒有看到你復位..莫非是原因值？ – XepterX 2012-02-27 01:46:18

這很奇怪。能夠在這裏重現：http://jsfiddle.net/aNjM6/ – 2012-02-27 02:15:36

原因是您正在使用$("#slider").slider("value")來檢索該值。

這是不從我可以看到文檔中提及，但根據this bug ticket一張紙條，你應該使用ui.value獲得滑塊的新值和value方法來獲取老滑塊的值。這解釋了你的兩個問題。

考慮到這一點，您必須稍微調整一下代碼，以便利用ui.value來獲得每個滑塊。

我會改變兩件事情：

使用data-*屬性來指定哪些滑對應於軸：

<div id="slider2" class="slider" data-axis="x"></div> 
<div id="slider3" class="slider" data-axis="y"></div> 
<div id="slider4" class="slider" data-axis="z"></div>

更新您的slide回調充分利用這些屬性：

var boxShadow = { 
    x: 0, 
    y: 0, 
    z: 0 
}; 

$('#slider2, #slider3, #slider4').slider({ 
    step: 1, 
    animate: true, 
    slide: function(event, ui) { 
     var axis = $(this).data("axis"); 

     boxShadow[axis] = ui.value; 

     $('#xShadowValue').val(boxShadow.x + ' px'); 
     $('#yShadowValue').val(boxShadow.y + ' px'); 
     $('#zShadowValue').val(boxShadow.z + ' px');    

     $('#target').css('box-shadow', boxShadow.x + 'px ' + boxShadow.y + 'px ' + boxShadow.z + 'px ' + '#888888'); 
    } 
});

基本上，保持一個跟蹤x，y和z的簡單對象。使用前述的data-*屬性可輕鬆更新此對象。

例子：http://jsfiddle.net/t3gva/

來源

2012-02-27 02:30:33

Thanx工作順利 – 2012-02-27 10:09:55

jQuery ui多個滑塊混淆值

回答

相關問題