내 모든 (jQuery UI) 단일 슬라이더가 동일한 값을 얻습니다.

Question

동일한 페이지의 각 슬라이더에 각 슬라이더를 이동할 때 자체 값을 갖기를 원합니다.

하나를 슬라이드하면 각 슬라이더의 "슬라이더 블록"이 조건부 배경색으로 계획대로 작동하지만 모든 슬라이더에 대해 값이 동일합니다.

여기에 내 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/

그 문제를 해결하는 방법이 있나요? 도와 줘서 고마워!

Answer 1

동일한 값을 가지고있는 것은 아닙니다. 문제는 슬라이드가 발생할 때마다 두 핸들을 모두 업데이트한다는 것입니다. 가능한 수정 : http://jsfiddle.net/Wrq3H/3/ 슬라이드 이벤트 제기 당신이 요소에 아이들에게 ".ui-slider-handle" 모든 요소에서 선택을 변경해야하는 슬라이드 기능에서

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

Answer 2

각 슬라이더에 별도의 값 매개 변수를 만들어야합니다. 그들은 동일한 변수를 참조하므로 단계는 최신 값을 기반으로 둘 다 적용됩니다. 다음과 같이 시도하십시오 :

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

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

Answer 3

: 수정

이

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

당신이 많은을 사용할 수있게됩니다 슬라이드 기능을 변경하지 않은 슬라이더 예 http://jsfiddle.net/cVUp3/1/