Question

我有一个页面上有多个JQuery-UI滑块。每个滑块都有一个相关的文本输入框。关联是双向的：当滑块更改时，文本框值会更改。当文本框值更改时，滑块会更改。

我让它以一种方式工作，到目前为止：当滑块更改文本框值更改时。但我不能让它逆向工作。

这是一个滑块的标记：

<label for="amount">A price:</label>
<input type="text" class="amount" id="slider2_amount" />
<div class="slider" id="slider2" data-begin="200" data-end="500"></div>

这是JQuery，我试图通过它获取“amount”的值并使用它来设置相关滑块的值。我通过从文本框ID的末尾减去7个字符（“_amount”）来确定文本框所属的滑块。这打印出正确的滑块ID，但我收到错误“对象＃slider2没有方法'滑块'”。

$('.amount').change(function() {
    var value = $(this).attr("value"),
        selector = ("#" + $(this).attr("id").slice(0,-7));
        selector.slider("value", value);
})

有没有更好的方法来确定文本框和包含许多两者的页面上的滑块之间的关系？或者，你能看到为什么这不起作用的另一个原因吗？

__

更新：我正在尝试遵循JQueryUI上Hotel Rooms demo中使用的模型，但是它们的标记假定每页有一个滑块实例。

Answer 1

这是一个建议：

$('.amount').change(function () {
    var value = this.value,
        selector = $(this).parent('p').next();  
    selector.slider("value", value);
})

演示here

根据您的想法，更正是：selector = $("#" + this.id.split('_')[0]);
此演示here

Answer 2

试试这个：

$('.amount').change(function() {
    var value = $(this).attr("value"),
    selector = ("#" + $(this).attr("id").slice(0,-7));
    selector.val(value);
    selector.slider('refresh');
})

在change（）上从文本框值更新JQuery-UI滑块

2 个答案:

演示here