jQuery ui複数のスライダと値の混乱

Question

私は短期間のUIスライダユーティリティに使用しており、次の状況で終了しました。結果を使用してオブジェクトのCSSボックスシャドウを変更するために、3つのスライダを組み合わせました。これは私のコードです：

$('#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'); 

問題は私が最初のものをすべて変更しても問題ありません。私が第2のものを変えるとき、第1のものは、第2のもののために第3のものが変わるとき、同じ単位を落とすか、または増加させる。さらに、私は0または100にそれらのすべてをスライドすることはできません。制限は1と99に応じて表示されます。あらかじめThanx。

Answer 1

これは、$("#slider").slider("value")を使用して値を取得しているためです。

これは私が見ることができるものから、ドキュメントに記載ないが、this bug ticketでノートによると、あなたは古いを取得するには、スライダの新しい値とvalue方法を取得するためにui.valueを使用する必要がありますスライダの値。これは両方の問題を説明します。

これを念頭に置いて、スライダーごとにui.valueを利用できるように、コードを少し微調整する必要があります。

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'); 
    } 
}); 

：これらの属性を活用すること

<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コールバックを更新しますためにどの軸対応するスライダー指定する属性data-*

1. 用途：

   私は二つのことを変更します

基本的に、x、y、zを追跡する単純なオブジェクトを保持します。このオブジェクトは前述のdata-*属性を使用して簡単に更新できます。

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