スライダ移動時のテキストの変更

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/