更改类使用jQuery滑块UI

我想使用jQuery滑块UI更改单独的元素上的类。更改类使用jQuery滑块UI

滑块例如会有10个步骤，并且每一步都会有一个相应的类应用于目标元素。

例如：

当滑块处于位置2时，元件具有类的一个“步骤二” 当滑块在位置6，元件具有的类的” .step-六“

我还想在用户移动滑块时更改类，而不仅仅是在发布时。这可能吗？

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

     } 
    } 
});

来源

2012-10-29 oakleyarts

你尝试过什么已经，什么不起作用？您是否阅读过文档？ – Tibo

当然，它是可能的！你应该看看这个触发事件，然后实现你自己的逻辑：http://api.jqueryui.com/slider/#event-change –

我已更新帖子，以显示我到目前为止，我相信我在正确的轨道，但不知道如果我吠叫错误的树。在他的例子中，我有11个步骤......而不是10个步骤。 – oakleyarts

是的，我能想到的办法之一是：

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

另一个办法是：_{prolly这里更好的方式}

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

来源

2012-10-29 16:44:15 SpYk3HH

下面是关于如何做一个小的帮助它，为什么你想这是超越我：

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

或者，如果你必须使用“一”，“二”等使用数组：

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

FIDDLE

来源

2012-10-29 16:44:25 adeneo

谢谢你，这是一个实验性的项目，所以我很欣赏这可能不是滑块的正确使用，虽然滑块将代表一个时间线，并且将根据所选时间段重新调整所述元素。 – oakleyarts

太棒了！这正是我一直在努力实现的！ – oakleyarts

更改类使用jQuery滑块UI

回答

相关问题