我想使用jQuery滑块UI来更改单独元素上的类。
滑块例如有10个步骤,对于每个步骤,都会有一个相应的类应用于目标元素。
例如:
当滑块位于位置2时,该元素的类别为“.step-two” 当滑块位于位置6时,该元素的类别为“.step-six”
我还希望在用户移动滑块时更改类,而不仅仅是在发布时。这可能吗?
$('#slider').slider({
value:0,
min: 0,
max: 110,
step: 11,
slide: function(event,ui){
if (ui.value<0) {
$('#object').addClass('step-one');
} else if (ui.value<10) {
$('#object' ).addClass('step-two');
}
}
});
答案 0 :(得分:1)
这里有一些关于如何做到这一点的帮助,为什么你会希望这超出我的范围:
$("#slider").slider({
min: 1,
max: 10,
step: 1,
range: false,
slide: function(event, ui) {
$("#someotherElement").removeClass().addClass('step_'+ui.value); //adds class step_1 -> step_10 etc
}
});
或者如果你必须使用“one”,“two”等使用数组:
var array = ['one','two','three','four','five','six'....etc]
$("#slider").slider({
min: 0,
max: 10,
step: 1,
range: false,
slide: function(event, ui) {
$("#someotherElement").removeClass().addClass('step_'+array[ui.value]);
}
});
答案 1 :(得分:0)
是的,我能想到的一种方式是:
$( "#slider" ).slider({
value:1,
min: 1,
max: 10,
slide: function( event, ui ) {
$("#someElementID").removeClass("step-" + (ui.value - 1) + " step-" + (ui.value + 1)).addClass("step-" + ui.value);
}
});
另一个是:这里更好的方式
var araClasses = new Array("step-one", "step-two", "step-three", "step-four", "step-five", "step-six", "step-seven", "step-eight", "step-nine", "step-ten");
$( "#slider" ).slider({
value:0,
min: 0,
max: 9,
change: function( event, ui ) { // change event is fired no matter how the slider is changed
// First remove all step classes
for (x in araClasses) { $("#someElementID").removeClass(araClasses[x]) };
// then add the relavant one
$("#someElementID").addClass(araClasses[ui.value]);
}
});