Question

我正在开发一个可能有一个或多个JQuery UI Sliders的模板。

如果每个滑块的设置都保存在输入的data-options或data-id属性中，我可以从单个脚本初始化所有滑块吗？

HTML就像：

<label for="amount">Amount <input type="text" id="amount" data-id="5000" class="ui-slider-input" readonly />
  <div class="max-slider"></div>
</label>

我有一个像这样的单个元素：

var sliderInput = $('#amount');
var sliderDiv = sliderInput.next('.max-slider');
var sliderMax = sliderInput.attr('data-id');
sliderDiv.slider({
  range: "min",
  value: sliderMax,
  min: 0,
  max: sliderMax,
  step: 10,
  slide: function( event, ui ) {
    sliderInput.val( ui.value );
  }
});
sliderInput.val( sliderMax ) );

但我想初始化多个滑块，每个滑块具有不同的最大值和步长值。

Answer 1

您可以使用each()

进行迭代

var options = {
    range : "min",
    min   : 0,
    step  : 10,
    slide : function( event, ui ) {
        $(this).prev().val( ui.value );
    }
}

$('.sliders').each(function() {
    $(this).slider(
        $.extend({}, options, {
            value : $(this).data('id'),
            max   : $(this).data('id'),
        })
    );
});

Jquery UI Slider多次启动

1 个答案: