如果值不是整数，则无法移动滑块 jquery ui 滑块答案

【问题标题】：cannot move slider if value is not integer jquery ui slider如果值不是整数，则无法移动滑块 jquery ui 滑块
【发布时间】：2012-02-18 16:27:20
【问题描述】：

jQuery UI Slider 插件有问题。我想要完成的是，如果数据库中没有滑块的值，这意味着还没有评级，所以我想显示“无值”或“无”之类的东西。问题是如果该值不是整数，我无法移动滑块手柄。您可以查看DEMO HERE。

为什么会发生这种情况，知道我做错了什么，如果值不是有效整数，为什么我不能移动滑块。

【问题讨论】：

标签： jquery jquery-ui slider jquery-ui-slider

【解决方案1】：

这很简单。与docs for the slider say 一样，value 参数必须是一个数字，并且您有“--”。将您的值设为 0 或什么都没有（例如“”）jsFiddle example。

【讨论】：

【解决方案2】：

jQuery 滑块基于整数值工作。当滑块“不是整数”时你想做什么？

如果不是数字，请查看下面的代码以保持 0，

function getSliderVal ($this) {
    var val = $this.val();
    return isNaN(val)?0:val;
}

在值参数中，

    ...
    value: getSliderVal (theSlider1.find("input[id=slider-value-1]")), 

    value: getSliderVal(theSlider2.find("input[id=slider-value-2]")),  
    ...

DEMO

【讨论】：

【解决方案3】：

我的建议是将一个数字（例如 -1）与“无值”状态相关联，并使用一些 JavaScript 逻辑来帮助您获得所需的内容：

$(".slider").slider({
    range: "min", 
    min: -1, 
    max: 10, 
    slide: function(event, ui){
        var value;
        if(ui.value == -1)
        {
            value = "--";
        }
        else
        {
            value = ui.value;
        }

        $(this).find("input.slider-value").val(value);
    },
    create: function(event, ui){
        $(this).slider("value", $(this).find("input.slider-value").val()); // value of the slider handle
    }
});

<div>
    <p style="color:green;"><b>Slider can be moved</b></p>

    <div class="slider"><br/>
        <input class="slider-value" type="text" value="3" style="text-align: center;" />
    </div>
</div>

DEMO

【讨论】：