Toggle class correct usage?

Question

JavaScript

The task is this: so that by clicking on the button .js-menu-triggeron the class .headeradded . This is how I did it:class="header_colored"

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

But the problem is that the header on the site has two colors. On some pages, it already has the class .header_colored.
In general, I can’t figure out how to make the class .header_colored
Added only in the header where there is no .header_colored.
Preferably use toggle not addClass
DECIDED THIS:

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

Answer 1

You can try the following code:

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

    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');
  }
});