Jquery UI滑塊多重啓動

Question

我正在研究可能有一個或多個JQuery UI滑塊的模板。

我可以初始化從一個腳本所有滑塊，如果爲每個設置輸入上的數據選項或數據-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'), 
     }) 
    ); 
});