슬라이더가 움직일 때 텍스트가 변경됩니다.

Question

$(function() { 
    $(".sli3").slider({ 
     range: "min", 
     value: 50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
      $(".sli3_f").text($(this).val( ui.value+"%")); 
     } 
    }); 
    $(".sli3_f").text($(this).val($(".sli3").slider("value")+"%")); 
}); 


<div class="sli3"><span class="sli3_f"></span></div> 

슬라이더를 움직이면 텍스트를 변경하려고합니다. 브라우저에서 아무 것도 일어나지 않습니다. 아무 생각하세요?

Answer 1

나는 $ this.val()가 필요하다고 생각하지 않는다

$(function() { 
    $(".sli3").slider({ 
     range: "min", 
     value: 50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
      $(".sli3_f").text(ui.value+"%"); 
     } 
    }); 
    $(".sli3_f").text($(".sli3").slider("value")+"%"); 
}); 


<div class="sli3"><span class="sli3_f"></span></div> 

Answer 2

몇 가지 실수가 있습니다. 먼저 $(this).val(...)을 사용하고 싶지 않습니다. 이것은 $(this)의 값을 설정하는 것입니다.이 경우에는 사용자가 원하지 않습니다. 슬라이더 개체의 메서드에있을 때 ui.value에 의해 제공되는 값을 검색하기 만하면됩니다. 슬라이더의 방법 이외, 당신은 단지 $(".sli3").slider("value")를 원하는 :

$(function() { 
    $(".sli3").slider({ 
     range: "min", 
     value: 50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
      $(".sli3_f").text(ui.value + "%"); 
     } 
    }); 

    $(".sli3_f").text($(".sli3").slider("value") + "%"); 
}); 

데모 : http://jsfiddle.net/XjD4K/