JQuery заменить один класс другим

У меня есть этот jQuery, и я меняю стили в нем, но я слышал, что правильный способ сделать это - создать отдельный стиль и просто заменить классы на jQuery. Можете ли вы объяснить мне, как это сделать правильно:

$('.corpo_buttons_asia').click(function() {           
    $('.info').css('visibility', 'hidden');
    $('.info2').css('visibility', 'visible');
    $(this).css('z-index', '20');
    $(this).css('background-color', 'rgb(23,55,94)');
    $(this).css('color', '#FFF');
    $('.corpo_buttons_global').css('background-color', 'rgb(197,197,197)');
    $('.corpo_buttons_global').css('color', '#383838');         
}); 

$('.corpo_buttons_global').click(function() { 
    $('.info').css('visibility', 'visible');
    $('.info2').css('visibility', 'hidden');
    $(this).css('background-color', 'rgb(23,55,94)');
    $(this).css('color', '#FFF');
    $('.corpo_buttons_asia').css('z-index', '2');
    $('.corpo_buttons_asia').css('background-color', 'rgb(197,197,197)');
    $('.corpo_buttons_asia').css('color', '#383838');
});

Поэтому вместо использования .css() все время я могу создать другой класс и просто заменить его на jQuery.

Спасибо.

Ответы

Ответ 1

Чтобы сделать это эффективно с помощью jQuery, вы можете связать его так:

$('.theClassThatsThereNow').addClass('newClassWithYourStyles').removeClass('theClassThatsTherenow');

Для упрощения вы также можете сделать это шаг за шагом, как это сделать (примечание о назначении объекта jquery для var не обязательно, но оно безопаснее, если вы случайно удалите класс, на который настроен таргетинг, перед добавлением нового класса и имеют прямой доступ к dom node через его селектор jquery, например $('.theClassThatsThereNow')):

var el = $('.theClassThatsThereNow');
el.addClass('newClassWithYourStyles');
el.removeClass('theClassThatsThereNow');

Также (поскольку существует тег js), если вы хотите сделать это в vanilla js:

Для современных браузеров (Посмотрите, какие браузеры я называю современными)

(предполагая один элемент с классом theClassThatsThereNow)

var el = document.querySelector('.theClassThatsThereNow');
el.classList.remove('theClassThatsThereNow');
el.classList.add('newClassWithYourStyleRules');

Или более старые браузеры:

var el = document.getElementsByClassName('theClassThatsThereNow');
el.className = el.className.replace(/\s*theClassThatsThereNow\s*/, ' newClassWithYourStyleRules ');

Ответ 2

Вы можете использовать этот простой плагин:

(function ($) {
    $.fn.replaceClass = function (pFromClass, pToClass) {
        return this.removeClass(pFromClass).addClass(pToClass);
    };
}(jQuery));

Использование:

$('.divFoo').replaceClass('colored','blackAndWhite');

До:

<div class="divFoo colored"></div>

После:

<div class="divFoo blackAndWhite"></div>

Примечание. Вы можете использовать различные классы, разделенные пробелом.

Ответ 3

Вы можете использовать методы jQuery .hasClass(), .addClass() и .removeClass() для управления тем, какие классы применяются к вашим элементам. Просто определите разные классы и добавьте/удалите их по мере необходимости.

Ответ 4

Создайте класс в вашем файле CSS:

.active {
  z-index: 20;
  background: rgb(23,55,94)
  color: #fff;
}

Затем в вашем jQuery

$(this).addClass("active");

Ответ 5

вы могли бы использовать оба класса "corpo_button" или что-то в этом роде, а затем в $(".corpo_button").click(...) просто вызвать $(this).toggleClass("corpo_buttons_asia corpo_buttons_global");

Ответ 6

.removeClass и .addClass. Подробнее в http://api.jquery.com

Ответ 7

Вам нужно создать класс с CSS -

.greenclass {color:green;}

Затем вы можете добавить это к элементам с помощью

$('selector').addClass("green");

и удалите его с помощью

$('selector').removeClass("green");

Ответ 8

В jquery для замены класса другим вы можете использовать опцию jqueryUI SwitchClass

 $("#YourID").switchClass("old-class-here", "new-class-here");

Ответ 9

jQuery.fn.replaceClass = function(sSearch, sReplace) {
    return this.each(function() {
        var s = (' ' + this.className + ' ').replace(
            ' ' + sSearch.trim() + ' ',
            ' ' + sReplace.trim() + ' '
        );
        this.className = s.substr(1, s.length - 2);
    });
};

ИЗМЕНИТЬ

Это мое решение заменить один класс другим (путь jQuery). На самом деле другие ответы не заменяют один класс другим, а добавляют один класс и удаляют другой, который технически не является тем же самым.

Вот пример:

Разметка перед:  
js: jQuery('.el').remove('search-replace').add('replaced')
Разметка после:  

С моим решением

js: jQuery('.el').replaceClass('search-replace', 'replaced')
Разметка после:  

Представьте, что строка заменяет функцию на любом языке:

Поиск: "search-replace"
Заменить: "заменить"
Тема: "dont-search-replace"
Результат: "dont-search-replace"
Результат ( неправильный, но на самом деле то, что производят другие решения): "dont-search-replace replace"

PS Если он уверен, что класс для добавления отсутствует, и класс для удаления присутствует наверняка, самым простым решением jQuery будет:
jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')

PPS Я полностью понимаю, что если ваш селектор равен классу для удаления других решений, он будет работать просто отлично jQuery('.search-replace').removeClass('search-replace').addClass('whatever').
Но иногда вы работаете с более произвольными коллекциями.

Ответ 10

Начиная с фрагмента HTML:

<div class='helpTop ...

используйте фрагмент javaScript:

$(...).toggleClass('helpTop').toggleClass('helpBottom');