javascript - 在change()上从文本框值更新JQuery-UI slider

Question

我有一个页面，上面有多个 JQuery-UI slider 。每个 slider 都有一个关联的文本输入框。这种关联是双向的:当 slider 更改时，文本框值也会更改。当文本框值更改时， slider 也会更改。

到目前为止，我以一种方式工作:当 slider 更改时，文本框值也会更改。但我无法让它反向工作。

Here's a JSFiddle with my sliders

这是一个 slider 的标记:

<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，我试图用它来获取“金额”的值并使用它来设置关联 slider 的值。我通过从文本框 ID 末尾减去 7 个字符(“_amount”)来确定文本框属于哪个 slider 。这会打印出正确的 slider ID，但我收到错误“Object #slider2 has no method 'slider'”。

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

是否有更好的方法来确定包含许多文本框和 slider 的页面上的文本框和 slider 之间的关系？或者，您能看出这不起作用的另一个原因吗？

__

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

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