Toggle class правильное использование?

Question

[Alibek Kulseitov]

Задача такая: чтобы по клику на кнопку .js-menu-trigger на класс .header добавлялся class="header_colored".
Это я сделал вот так:

$('.js-menu-trigger').click(function() {
        $('.header').toggleClass('header_colored');
    });

Но проблема в том, что шапка на сайте двух цветов. На некоторых страницах она уже имеет класс .header_colored.
В общем не могу понять как сделать чтобы класс .header_colored
Добавлялся только в шапке где нету .header_colored.
Желательно использовать toggle не addClass

РЕШИЛ ВОТ ТАК:

$('.header').not('.header_main').toggleClass('header_colored');

Comments

[iBird Rose]

без дополнительного класса или атрибута никак

[Alibek Kulseitov]

iBird Rose, Например?

[iBird Rose]

Алибек Кулсеитов, ну например там где у тебя уже изначально есть этот класс - даешь атрибут, чтобы такие элементы не затрагивать.
а если такого атрибута нет - то такие элементы тугглишь

[Alibek Kulseitov]

iBird Rose, хмм хорошо, попробую )

Answer 1

[dmitrygavrish]

Можете попробовать следующий код:

$('.js-menu-trigger').click(function() {
    const header = $('.header');
    const headerClass = 'header_colored';

    header[header.hasClass(headerClass) ? 'removeClass' : 'addClass'](headerClass);
});

Comments

[Alibek Kulseitov]

Ваш код удаляет класс header_colored где он уже стоит изначально))

[dmitrygavrish]

Тогда вам не обойтись без дополнительной индикации того, что данному хедеру нельзя тогглить класс (т.е. задайте тем хедерам, у которых изначально есть класс 'header_colored', например, дополнительный класс или аттрибут):

$('.js-menu-trigger').click(function() {
    const header = $('.header');
    const headerClass = 'header_colored';
    const restrictedClass = 'toggle_disabled';

    if (!header.hasClass(restrictedClass)) {
        header[header.hasClass(headerClass) ? 'removeClass' : 'addClass'](headerClass);
    }
});

Answer 2

[Андрей]

$(document).ready(function(){
	$(".header.header_colored").addClass("already_colored");
});

$('.js-menu-trigger').click(function() {
	if($(".already_colored").length>0){
		$(".already_colored").removeClass("already_colored");
	}
	else{		
       	$('.header').toggleClass('header_colored');
	}
});