更改類使用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

回答

相關問題