我的页面上有一个jQuery UI滑块。它开始与：如何让用户更改jQuery UI滑块的选项？

$("#slider").slider({ 
    value: 6, 
    min: 6, 
    max: 120, 
    step: 6 
});

这工作正常。

我有一个选择元素旁边的6,12和24作为选项。我想完成的是让用户选择12，并且滑块的step，min和value全部转到12（24相同）。我已经试图建立一个函数：

$('#dropdown').change(function(){ 
    $("#slider").slider("option", "value", $(this).val()); 
    $("#slider").slider("option", "min", $(this).val()); 
    $("#slider").slider("option", "step", $(this).val()); 
    $("#slider").slider("option", "max", 120); 
});

然而这一切都为使被去值12，然后在点击滑块，它跳跃一路结束（120），只是停留在那里。

我是否需要摧毁滑块并从头开始重做？

EDIT＃1：

我刚下载萤火虫并检查与控制台滑块，和的值都返回正确的（分钟= 12，值= 12，步长= 12，最大= 120 ）。有谁知道为什么它如此固执，跳跃/坚持到底？

来源

2012-04-03 Lil' Bits

你能告诉我们关于这个的演示吗？ – Starx 2012-04-04 00:21:53

我会做一个小提琴，看看它是否做同样的事情。 – 2012-04-04 00:24:49

发现此问题。在使用它来更改滑块的选项之前，您需要将值从<select>解析为int。

$('#dropdown').change(function() 
{ 
    var currentVal = parseInt($("#slider").slider("value")); 
    var newOptions = parseInt($(this).val()); 
    $("#slider").slider("value", currentVal); 
    $("#slider").slider("option", "min", newOptions); 
    $("#slider").slider("option", "step", newOptions); 
    $("#slider").slider("option", "max", 120); 
});

工作实例

http://jsfiddle.net/DigitalBiscuits/VSBCT/1/

来源

2012-04-03 23:42:48

谢谢你的小提琴！如果没有人能告诉我为什么我的滑块在明天很怪异，我可能会这样做;除了我不会预先创建3个滑块，我会根据选择对象中的值创建它们，因为公司可能会在稍后要求提供更多值。 – 2012-04-04 00:12:48

我刚才改变了这个答案。不知道你在我之前还是之后看到它。这个新的工作，你需要它。 – 2012-04-04 00:15:53

给你一个三千块钱！这让我疯狂了好几天！非常感谢！ – 2012-04-04 00:34:06

实施是正确的。但你可以缓存结果

$('#dropdown').change(function(){ 
    var val = this.value; 
    $("#slider").slider("option", "value", val); 
    $("#slider").slider("option", "min", val); 
    $("#slider").slider("option", "step", val); 
    $("#slider").slidYou can er("option", "max", 120); 
});

来源

2012-04-03 23:54:54 Starx

不，对不起。这并没有解决问题。我知道我可以缓存$（this）.val（）/ this.value，我只是没有看到一个理由。 – 2012-04-04 00:01:45

如何让用户更改jQuery UI滑块的选项？

回答

工作实例

相关问题