2012-02-06 4 views
0

이것은 내가 실제로 가지고있는 것입니다 : http://jsfiddle.net/downloadtaky/P7jYU/ 내가 성취하고자하는 것은 사용자가 슬라이더를 움직일 때마다 가격 변경뿐 아니라 설명 변경도 보이지 않는다는 것입니다.jQuery UI Slider로 값을 추가하는 방법은 무엇입니까?

처럼 :

if 20 == basic service (lorem ipsum.....) 

if 40 == medium service (lorem ipsum.....) 

if 60 == top service (lorem ipsum.....) 

If 80 == I can give you also my mum! 

날이 작업을 수행하는 방법을 이해하는 데 도움이 수있는 사람이 있습니까? 다음과 같음 : https://interserver.net/vps/

감사합니다!

답변

0

당신이에 slide 기능을 변경할 수 있습니다

slide: function(event, ui) { 
       var text = "" 
       if ((ui.value <= 80) && (ui.value > 60)) 
        text = "text1"; 
       else if ((ui.value <= 60) && (ui.value > 40)) 
        text = "text2"; 
       //GO ON this way 
       $("#slider-result").html(ui.value + "<div>"+text+"<div>"); 

      }, 

여기서 확인할 수 있습니다. http://jsfiddle.net/V7LLy/

+0

일반적으로 JsFiddle에 대한 링크를 게시하지 마십시오. 여기 StackOverflow에서 대답의 핵심 부분입니다. 그러나 코드가 작동하는 것으로 보입니다. – GregL

+0

질문이 하나 더 있습니다. 텍스트가 아닌 이미지를 추가하는 경우 : if ((ui.value <= 80) && (ui.value> 60)) text = "

가 ";' 내가 그래, 올 60에서 70 더 – maisdesign

+0

로 이동하는 경우에도 표시됩니다. 당신이 썼을 때 60.80의 간격으로 표시됩니다 .60에서 원하는 경우 _if statment_를'ui.value == 60'으로 변경할 수 있습니다. – zambotn

1

나는 당신이 어디에 붙어 있는지 확실하지 않습니다. 이미 슬라이드 이벤트에 대한 핸들러가 있습니다. 설명 텍스트를 작성하거나 수정하는 코드를 추가하기 만하면됩니다.

$("#slider-result").html(ui.value).append(ui.value < 50? "- Bad":"- Good"); 
+0

나는 그들이 복사 - 붙여 넣기하는 코드를 의심하고, 그것을 수정하는 방법을 완전히 이해하지 못합니다. 아무 문제가 없다고해서, 우리는 모두 jQuery로 시작합니다. 그러나 OP가 왜 질문을해야하는지 설명 할 수 있습니다. – GregL

+0

당신은 거의 옳습니다. 저는 jQuery를 다루는 거의 초보자입니다. 그 기능이 어떻게 작동하는지 완전히 이해하지 못했습니다 :-P – maisdesign

1

과 같이, 관심있는 사업부를 업데이트 슬라이더의 변경 이벤트에 콜백 함수를 사용

$("#slider").slider({ 
    change: function(event, ui) { 
     if($("#slider").slider("value") === "20"){ 
      $("#description").html("Basic Service") 
     } 
     ... 
    } 
}); 

DOCO 여기 http://jqueryui.com/demos/slider/

관련 문제