Как переключаться между классами, используя addClass и removeClass?

Я создаю свой собственный Switcher jQuery и хочу удалить класс, например, при нажатии на другой цвет: у меня есть "синий" класс на теге body, а когда кто-то нажимает на красный, следует удалить синий класс и заменить его на красный класс и т. Д.,

Код:

$("body").addClass("wide light blue");

// Switcher jQuery Plugin
$(".switcher-toggle").click(function() {
    $("#switcher").toggleClass("open");
});

// Theme Layout Switch
$(".layout").change(function() {
    var layout = $(".layout").val();
    $(".wrapper").css("width",layout);
});

// Theme Skins Switch
$(".skins").change(function() {
    var skin = $(".skins").val();
    $("body").toggleClass(skin);
});

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
         $("body").toggleClass(data_color);
     });
});

Демо: https://jsfiddle.net/uikithemes/p18cqa5s/

Источник

4 ответа

Решение

Во-первых, обратите внимание, что each() цикл избыточен, так как вы можете получить доступ к data-color Атрибут непосредственно в обработчике кликов.

Во-вторых, для достижения того, что вам нужно, вы можете предоставить разделенный пробелами список всех классов, которые нужно удалить, используя removeClass перед добавлением нового класса с addClass, Попробуй это:

$(".colors span").click(function() {
    $("body")
        .removeClass('blue red green orange carrot violet pink gold')
        .addClass($(this).data("color"));
});

Обновленная скрипка

Однако это может стать немного трудным для поддержания, если цвета добавлены или удалены. Лучшим вариантом было бы вызвать одну функцию для установки классов на body Элемент всякий раз, когда выбран вариант или цвет нажал. Попробуй это:

$(".skins, .layout").change(applyClasses);
$(".colors span").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    applyClasses();
});

function applyClasses() {
    var classes = [
        $(".skins").val(),
        $(".layout").val(),
        $(".colors span.active").data('color')
    ];

    $('body').removeClass().addClass(classes.join(' '));
}

applyClasses(); // on load

Обновленная скрипка

Источник

Попробуйте удалить установленный цвет из body элемент className с помощью .split() с параметром " ", .slice() с параметром -1 выбрать последний className установлен на body перед звонком .toggleClass() установить новый цвет; также добавляя true в .toggleClass() предотвратить удаление class если образец цвета нажал последовательно

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
         $("body").removeClass(document.body.className.split(" ").slice(-1)[0])
         .toggleClass(data_color, true);
     });
});

jsfiddle https://jsfiddle.net/p18cqa5s/3/

Источник

Использовать removeClass() метод для удаления существующих классов и вызова addClass() добавить новый класс.

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
        $("body").removeClass().addClass(data_color);            
     });
});

removeClass() Метод без параметров удалит все классы.

Более упрощенная версия

$(".colors span").click(function(e){
  e.preventDefault();
  $("body").removeClass().addClass($(this).attr("data-color"));
})

Убедитесь, что ваш код находится внутри document.ready событие

Источник

Добавить все data_color в массив, а затем по щелчку цвета удалить весь класс из тела, которые находятся в массиве. После этого добавьте новый класс, как показано ниже.

var data_color= [];
// Theme Colors Switch
$(".colors span").each(function() {
     data_color.push($(this).attr("data-color"));
     $(this).click(function() {
         $("body").removeClass(data_color.join(' ')).addClass($(this).attr("data-color"));
     });
});

Обновленная скрипка: https://jsfiddle.net/p18cqa5s/5/

Источник
Другие вопросы по тегам