我需要在页面中多次使用函数jquery(UI滑块范围)。 不幸的是,我做不到! 你能救我吗?
我有一个脚本“main.js”如下:
jQuery(function($){
$('.range').each(function(){
var cls = $(this).attr('class');
var matches = cls.split(/([a-zA-Z]+)\-([0-9]+)/g);
var elem = $(this).parent();
var options = {};
var values = new Array();
var input = elem.find('input');
elem.append('<div class="uirange"></div>');
options.range = true;
options.orientation = "horizontal";
options.disabled = false;
for(i in matches){
i = i * 1;
if (matches[i] == 'min') {
options.min = matches[i+1]*1;
}
if (matches[i] == 'max') {
options.max = matches[i+1]*1;
}
if (matches[i] == 'prem') {
options.values[0] = matches[i+1]*1;
}
if (matches[i] == 'dern') {
options.values[1] = matches[i+1]*1;
}
if (matches[i] == 'step') {
options.step = matches[i+1]*1;
}
}
options.slide = function(event, ui){
elem.find('label span').empty().append(ui.values[0] + "€ - " + ui.values[1] + "€");
input.val(ui.values[0] + "€ - " + ui.values[1] + "€");
}
elem.find('.uirange').slider(options);
elem.find('label span').empty().append(input.val());
input.hide();
});
});
此函数一次调用如下:
<div class="choix">
<div class="rubrique">Rubrique 01</div>
<div class="input">
<label for="">Valeur : <span></span></label>
<input type="text" class"range min-0 max-100 prem-10 dern-80 step-10" />
</div>
</div>
<div class="choix">
<div class="rubrique">Rubrique 02</div>
<div class="input">
<label for="">Valeur : <span></span></label>
<input type="text" class"range prem-1000 dern-10000 step-100" />
</div>
</div>
<div class="choix">
<div class="rubrique">Rubrique 03</div>
<div class="input">
<label for="">Valeur : <span></span></label>
<input type="text" class"range prem-0 dern-1 step-0.1" />
</div>
</div>