如果值不是整数,则无法移动滑块 jquery ui slider

发布于 2025-01-07 10:23:53 字数 309 浏览 5 评论 0原文

我的 jQuery UI Slider 插件遇到问题。我想要完成的是,如果数据库中没有滑块的值,则意味着还没有评级,所以我想显示“无值”或“无”之类的内容。问题是,如果该值不是整数,我无法移动滑块手柄。您可以此处查看演示

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

I have a problem here with the jQuery UI Slider plugin. What I'm trying to accomplish is that if there is not a value for the slider in the database, that means there has been no rating yet, so I want to display something like "No value" or "Nil" or something. The problem is that if that value is not an integer, I cannot move the slider handle. You can view a DEMO HERE.

Why is this happening, any idea what am I doing wrong, why can't I move the slider if the value is not a valid integer.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

滥情哥ㄟ 2025-01-14 10:23:53

这很简单。正如 滑块文档所述, value 参数必须是数字,并且您有 ” - ”。将您的值设置为 0 或什么都没有(例如“”)jsFiddle 示例

It's quite simple. As the docs for the slider say, the value parameter has to be a number and you have "--". Make your value 0 or just nothing (e.g. "") jsFiddle example.

快乐很简单 2025-01-14 10:23:53

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]")),  
    ...

演示

jQuery slider works based on integer values. What do you want to do when the slider is "not an integer"?

Check out the below code to stay at 0 if it is not a number,

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

and in the value param,

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

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

DEMO

暗藏城府 2025-01-14 10:23:53

我的建议是将数字(例如 -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>

演示

My suggestion is to associate a number (e.g. -1) with the "No value" state and have some JavaScript logic to help you obtain what you want:

$(".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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文