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

请参阅此fiddle

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 UI create事件和option方法动态设置选项：

＆＃13;

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

＆＃13;

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

2 个答案: