Jquery добавить и удалить класс с помощью ползунка

Question

У меня есть приведенный ниже код для ползунка, и теперь мне нужно добавить и удалить css для элемента, используя значение max и min.

Вот что у меня есть:

   $( "#audioslider" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            var value = $("#audioslider").slider("value");
            document.getElementById("audio").volume = (value / 100);
            if(value == 0){
            $('.volumeon').addClass('volumeoff')
            }else if(value >= "max"){
            $('.volumeon').addClass('volumeon')
            }
        }
    });

И если это min, добавляется класс, но не добавляется, если его значение больше min.Так как мне это сделать?

Answer 1

Это выглядит в основном как опечатка - вы сравниваете value с текстом "max", а не с переменной.Просто измените эту строку на

}else if (value == 100){

Answer 2

Похоже, логика немного отключена.

Громкость включена, если значение> = 100, но выключена, если она равна 0?Не будет ли объем включен, если он больше 0?

Как упоминал Энди, вы сравниваете значение var со строкой 'max', а не с фактическим предполагаемым максимумом, который является свойством слайдера.*

В любом случае с заданной логикой.Вы захотите сделать класс удаления для 'volumeOn' и добавить класс 'volumeOff', когда значение равно 0. В случае, когда значение> = 100, вы захотите сделать наоборот, удалите 'volumeOff'и добавьте «VolumeOn».

По сути, этот бит кода.

if(value == 0){
  $('.volumeon').addClass('volumeoff').removeClass('volumeon');
} else if(value >= 100){
  $('.volumeoff').addClass('volumeon').removeClass('volumeoff');
}

Answer 3

Вы имеете в виду этот путь?

if(value < 1){
    $('.volumeon').addClass('volumeoff');
    $('.volumeon').removeClass('volumeon');
 }else {
    $('.volumeoff').addClass('volumeon');
    $('.volumeoff').removeClass('volumeoff');
 }