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

문제는 내가 처음 하나를 변경하면 괜찮습니다. 내가 두 번째를 바꿀 때 첫 ​​번째 것이 떨어지거나 하나의 단위가 증가 할 때마다 두 번째 세 번째가 발생합니다. 또한 나는 0 또는 100 모두를 슬라이드 수 없습니다. 제한은 1과 99에 따라 적절하게 나타납니다. 고맙습니다.

Answer 1

이 이유는 $("#slider").slider("value")을 사용하여 값을 검색하고 있기 때문입니다.

이 는 이전을 얻을하지 내가 볼 수있는 것과 설명서에 언급,하지만 this bug ticket의 메모에 따르면, 슬라이더의 새로운 값을 얻을 수 ui.value를 사용해야하고 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/