从文本框值更新JQuery-UI滑块更改（）

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，我试图用它来获取“金额”的值，并用它来设置关联滑块的值。我通过从文本框ID的末尾减去7个字符（“_amount”）来确定文本框属于哪个滑块。这将作为正确的滑块ID打印出来，但我收到错误"对象#滑块2没有方法'滑块'"。

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

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

__

更新：我试图遵循JQueryUI上酒店客房演示中使用的模型，但是他们的标记假设每页有一个滑块实例。

Answer 1

试试这个：

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

Answer 2

以下是一个建议：

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

使用你的想法，更正是：选择器 = $("#" this.id.split（'_'）[0]）；
这里的演示