jquery-ui - htmlデータ属性からjQuery uiスライダーパラメーターを設定する

Question

スライダー範囲の最大値を html データ パラメータに埋め込みたい。私はいくつかのデバッグを行いました.データにアクセスでき、数値であるという事実にもかかわらず、スライダーはデフォルトの最大値である 100 を使用します.

私のHTML：

<div class="slider" data-max="10"></div>
<label for="slider_value">Slider Value:</label>
<input type="text" id="slider_value" />

私のJavascript：

$(document).ready(function () {
    $("div.slider").slider({
        min: 0,
        max: $(this).data("max"),
        slide: function (event, ui) {
            $("input#slider_value").val(ui.value);
        }
    });
});

このフィドルを参照してください

Answer 1

の引数オブ​​ジェクトslider()が評価されるとき、thisはオブジェクトへの参照であり、ではdocumentありませんdiv.slider。div.slider再度検索するか、参照を保存する必要があります( demo ):

$(document).ready(function () {
    var div = $("div.slider");
    div.slider({
        min: 0,
        max: div.data("max"),
        slide: function (event, ui) {
            $("input#slider_value").val(ui.value);
        }
    });
});

Answer 2

メソッドで jQuery UIcreateイベントを使用して、optionオプションを動的に設定します。

$(document).ready(function() {
    $('div.slider').slider({
        min: 0,
        create: function(event, ui) {
            $(this).slider('option', 'max', $(this).data('max'));
        },
        slide: function(event, ui) {
            $("input#slider_value").val(ui.value);
        }
    });
});