滑动条移动时更改文字

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/