从 jQuery UI Slider 获取值答案

【问题标题】：Getting the value from a jQuery UI Slider从 jQuery UI Slider 获取值
【发布时间】：2011-03-15 03:48:43
【问题描述】：

我有一个 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（默认值）。

如何让它正确传递值？

另外，我希望在移动滑块时自动刷新页面上的值（现在它使用文本框显示，但我真的不想使用文本框），我该怎么做?

【问题讨论】：

你有这个 jsfiddle 吗？
我认为应该在 $("#ratingResult").val(return $("#ratingSlider").slider("value"));

标签： jquery jquery-ui

【解决方案1】：

要在滑块初始化时显示评分，您需要更改该 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);
    }
  });

【讨论】：

【解决方案2】：

在更改事件处理程序中使用ui.value。

$('#ratingSlider').change(function(e, ui) {
    $('#rateToPost').attr('value', ui.value);
});

【讨论】：