0

我的页面上有一个 jQuery UI 滑块。它开始于：

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

哪个工作正常。

我旁边有一个选择元素，其中有 6、12 和 24 作为选项。我想要完成的是让用户选择 12，滑块的步长、最小值和值都变为 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) 并停留在那里。

我是否需要销毁滑块并从头开始重新制作？

编辑＃1：

我刚刚下载了 Firebug 并使用控制台检查了滑块，所有值都返回正确（min=12，value=12，step=12，max=120）。有谁知道为什么它如此固执和跳跃/坚持到底？

4

2 回答 2

2

发现问题。<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-03T23:42:48.490 回答
0

执行是正确的。但是你可以缓存结果

$('#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-03T23:54:54.973 回答