jquery - 从 jQuery UI Slider 获取值

Question

我有一个 jQuery UI slider ，它是评级系统的一部分。您可以滑动到值 1 - 5，以便对它进行 1 到 5 的评分。当 slider 第一次出现时，我将其默认为 3。它所属的表单有一个隐藏输入，其值应该是 slider 的值，但事实并非如此。

这是 jQuery:

$( "#ratingSlider" ).slider({
        range: "min",
        value: 3,
        min: 1,
        max: 5,
        slide: function( event, ui ) {
            $( "#ratingResult" ).val( ui.value );
        }
    });
    $( "#ratingResult" ).val( $( "#ratingSlider" ).slider( "value" ) );
    $("#ratingSlider").change(function(){
        $( "#rateToPost" ).attr('value', $( "#ratingSlider" ).slider( "value" ) );
    });

我尝试将 #rateToPost 的 .val() 设为 slider 的 .val()，但它总是只给它 3(默认值)。

如何让它正确传递值？

另外，我希望每当 slider 移动时页面上的值自动刷新(现在它使用文本框显示，但我真的不想使用文本框)，我该怎么做？

Answer 1

要在 slider 初始化中滑动时显示评级，您需要更改该 div 的文本(假设您有一个 ID 为“ratingResult”的 div (不是输入框))。要在用户完成拖动时更新值，您需要将更改事件添加到初始化代码中。

$("#ratingSlider").slider({
    range: "min",
    value: 3,
    min: 1,
    max: 5,
    //this gets a live reading of the value and prints it on the page
    slide: function(event, ui) {
      $("#ratingResult").text(ui.value);
    },
    //this updates the value of your hidden field when user stops dragging
    change: function(event, ui) {
      $('#rateToPost').attr('value', ui.value);
    }
  });