Jquery Используйте класс переключения с двумя элементами

Мне нужен небольшой совет, чтобы решить эту проблему:

У меня есть 6 кнопок, которые, когда пользователь нажимает на них, заполняется «панель данных». Это делается путем изменения высоты этого div панели данных.

If user clicks on button1 or 2 -> Databar changes to small
If user clicks on button 3 or 4 -> Databar fills up to medium
If user clicks on 5 or 6 -> Databar fills to large

Проблема в том, что я не могу использовать toggleClass для переключения div на другую высоту. Потому что с использованием метода класса toggle это произойдет: если пользователь нажмет кнопку 1, div будет правильно изменен на «маленький». Однако, если пользователь также нажмет кнопку 2, класс, конечно, будет удален. Я хотел бы, чтобы пользователь мог нажимать кнопки 1 и 2, чтобы div изменился на «маленький» класс. Однако, если пользователь ОТКЛЮЧАЕТ кнопку 1 И 2... "маленький" класс должен быть удален.

То же самое относится и к остальным кнопкам. Поэтому, если пользователь ОТКЛЮЧАЕТ кнопки 3 и 4, класс «средний» должен быть удален, чтобы высота div возвращалась к нулю, нажимались маленькие или любые другие кнопки.

Я создал скрипт, чтобы проиллюстрировать, что я хочу: http://jsfiddle.net/NvdB31/M6jGJ/1/


html if-statement jquery addclass toggleclass
person NvdB31    schedule 19.05.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны проверить, нажата ли одна из кнопок и имеет ли она класс button_clicked. Зная это, вы можете использовать toggleClass в конце концов.

Измените свой JavaScript на следующее:

$(".button1, .button2").click(function() {
    $(this).toggleClass("button_clicked");
    var show = $(".button1, .button2").hasClass("button_clicked");
    $(".databar").toggleClass("databar_small", show);
});

$(".button3, .button4").click(function() {   
    $(this).toggleClass("button_clicked");
    var show = $(".button3, .button4").hasClass("button_clicked");
    $(".databar").toggleClass("databar_medium", show);
});

$(".button5, .button6").click(function() {
    $(this).toggleClass("button_clicked");
    var show = $(".button5, .button6").hasClass("button_clicked");
    $(".databar").toggleClass("databar_large", show);
});

Обновление вашего JSFiddle.

Изменить: в качестве бонуса я снова обновил JSFiddle, чтобы использовать меньше JavaScript и использовать всего один класс кнопок вместо 6.

person ZiNNED    schedule 19.05.2014

arrow_upward
0
arrow_downward

Используйте функцию hasClass для проверки class существования или отсутствия, если существует, удалите класс, в противном случае добавьте класс databar_small. Как и в приведенном ниже коде,

$(".button1, .button2").click(function() {
    if($(".databar").hasClass("databar_small")){
        $(".databar").removeClass("databar_small");
    }
    else{
        $(".databar").addClass("databar_small");
    }
    $(this).toggleClass("button_clicked");
});

ДЕМО

person Manibharathi    schedule 19.05.2014
comment
Спасибо за вашу помощь. Однако это не решает ее полностью. Если пользователь нажимает кнопку 1, класс добавляется. Однако, если пользователь нажимает кнопку 2, он должен ОСТАВАТЬСЯ в ранее добавленном классе. Теперь... он возвращается к нулю, если пользователь нажимает кнопку 1 И 2. - person NvdB31; 19.05.2014