2

複数の JQuery-UI スライダーを含むページがあります。各スライダーには、テキスト入力ボックスが関連付けられています。関連付けは双方向です。スライダーが変化すると、テキスト ボックスの値が変化します。テキスト ボックスの値が変化すると、スライダーが変化します。

これまでのところ、1 つの方法で動作しています。スライダーが変更されると、テキスト ボックスの値が変更されます。しかし、私はそれを逆に機能させることはできません。

これが私のスライダーを備えたJSFiddleです

1 つのスライダーのマークアップを次に示します。

<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 として出力されますが、「オブジェクト #slider2 にはメソッド 'slider' がありません」というエラーが表示されます。

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

テキスト ボックスとスライダーの両方を多く含むページで、テキスト ボックスとスライダーの関係を把握するためのより良い方法はありますか? または、これが機能しない別の理由がわかりますか?

__

更新: JQueryUI のHotel Rooms デモで使用されているモデルに従おうとしていますが、それらのマークアップは、ページごとにスライダーの 1 つのインスタンスを想定しています。

4

2 に答える 2