从jQuery UI Slider获取值

Question

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

这是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()设置为滑块的.val(),但它总是只给它3(默认值).

如何让它正确传递值？

此外,我希望每当移动滑块时,页面上的值都会自动刷新(现在它使用文本框显示但我真的不想使用文本框),我该怎么办呢？

Answer 1

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

$("#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);
    }
  });