AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

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

Задача такая: чтобы по клику на кнопку .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');
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
@dmitrygavrish
Можете попробовать следующий код:
$('.js-menu-trigger').click(function() {
    const header = $('.header');
    const headerClass = 'header_colored';

    header[header.hasClass(headerClass) ? 'removeClass' : 'addClass'](headerClass);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
byte916
@byte916
$(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');
	}
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы