1

Foundation 5を使用して Web ページをコーディングしています。このページには、いくつかのデータ範囲スライダーが含まれています。しかし、JSON メッセージから取得した情報に基づいて、それらのスライダーを動的に生成します。ですから、スライダーがいくつあるのかわかりません。

これは、スライダーのhtmlがループでどのように見えるかです（テンプレート化にハンドルバーを使用）

{{#elements}}

<div class="small-10 medium-11 columns">
    <div id="range-slider-{{id}}" class="range-slider round" data-slider="{{val}}">
        <span class="range-slider-handle"></span>
        <span class="range-slider-active-segment"></span>
    </div>
</div>

{{/elements}}

ご覧のとおり、各スライダーには異なる ID と異なる開始値があります。

ここで、スライダーを動かすイベントを処理したいと思います。そこで、任意のスライダーの「変更」イベントに応答する 1 つのメソッドを作成しました。

$('[data-slider]').on('change.fndtn.slider', function(event){
  // do something when the value changes

});

私の質問は次のとおりです。イベントを発生させたスライダーの値にアクセスするにはどうすればよいですか?

推奨される方法は、

$('#slider_id').attr('data-slider');

しかし、それは dynamic であるため、slider_id はわかりません。

動的に生成されたスライダーを操作する例が見つかりませんでした。手がかりはありますか？

4

1 に答える 1

2

Ok。答えが見つかったようです

$( this ).attr('id') // The id of the element that raised the event
$( this ).attr('data-slider') // The slider's value
于 2014-07-02T15:17:34.770 に答える