从html数据属性设置jQuery ui slider params

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()评估参数对象for时,this是对document对象的引用,而不是div.slider.您需要div.slider再次查找或保存对它的引用(演示):

$(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);
        }
    });
});