Is there a smart way to simplify these jquery codes?

Question

My website is here : http://www.xestudio.xco.kr and if you click on the cog button on the left panel, you can see the situation.

To explain my situation, I will simply say, I have this website that's called 'Website Builder' in my mind, and the crucial functionality of the website is to easily manipulate all the options by clicking on the user interface.

I have created numerous buttons for each different header style, body style, footer style, etc, that activates when click on those buttons in order to change the style of the website.

The problem is that, for those function to work, i have to put in all the possibility into consideration, meaning that the codes must include

'removeClass header type 1,2,3,4,5,6,7,8' AND 'addClass header type 9' so on, the list goes on.

Is there anyway I can simplify these codes? im afraid my website will go crash if i don't do something about it. lol

and here are the exact codes that mywebsite uses.

<img src="images/header_type1.png" 
     onclick="jQuery('.xe-clearfix').addClass('header_type_1',200),

              jQuery('.xe-clearfix').removeClass('header_type_2',200),
              jQuery('.xe-clearfix').removeClass('header_type_3',200),
              jQuery('.xe-clearfix').removeClass('header_type_4',200),

              jQuery('.fixed_header .header_wrap').addClass('header_type_1',200),

              jQuery('.fixed_header .header_wrap').removeClass('header_type_2',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_3',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_4',200),

              jQuery('.gnb>ul>li').addClass('header_type_1',200),
              jQuery('.gnb>ul>li').removeClass('header_type_2',200),
              jQuery('.gnb>ul>li').removeClass('header_type_3',200),
              jQuery('.gnb>ul>li').removeClass('header_type_4',200),
              ">


<img src="images/header_type2.png" 
     onclick=" jQuery('.xe-clearfix').addClass('header_type_2',200),

              jQuery('.xe-clearfix').removeClass('header_type_1',200),
              jQuery('.xe-clearfix').removeClass('header_type_3',200),
              jQuery('.xe-clearfix').removeClass('header_type_4',200),

              jQuery('.fixed_header .header_wrap').addClass('header_type_2',200),

              jQuery('.fixed_header .header_wrap').removeClass('header_type_1',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_3',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_4',200),

              jQuery('.gnb>ul>li').addClass('header_type_2',200),
              jQuery('.gnb>ul>li').removeClass('header_type_1',200),
              jQuery('.gnb>ul>li').removeClass('header_type_3',200),
              jQuery('.gnb>ul>li').removeClass('header_type_4',200)
">

    <img src="images/header_type3.png" 
     onclick="

              jQuery('.xe-clearfix').removeClass('header_type_1',200),
              jQuery('.xe-clearfix').removeClass('header_type_2',200),
              jQuery('.xe-clearfix').removeClass('header_type_4',200),

              jQuery('.xe-clearfix').addClass('header_type_3',200),
              jQuery('.fixed_header .header_wrap').addClass('header_type_3',200),

              jQuery('.fixed_header .header_wrap').removeClass('header_type_1',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_2',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_4',200),

              jQuery('.gnb>ul>li').addClass('header_type_3',200),
              jQuery('.gnb>ul>li').removeClass('header_type_1',200),
              jQuery('.gnb>ul>li').removeClass('header_type_2',200),
              jQuery('.gnb>ul>li').removeClass('header_type_4',200)" width="100px">

<img src="images/header_type4.png" 
     onclick="jQuery('.xe-clearfix').addClass('header_type_4',200),

              jQuery('.xe-clearfix').removeClass('header_type_1',200),
              jQuery('.xe-clearfix').removeClass('header_type_2',200),
              jQuery('.xe-clearfix').removeClass('header_type_3',200),

              jQuery('.fixed_header .header_wrap').addClass('header_type_4',200),

              jQuery('.fixed_header .header_wrap').removeClass('header_type_1',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_2',200),
              jQuery('.fixed_header .header_wrap').removeClass('header_type_3',200),


              jQuery('.gnb>ul>li').addClass('header_type_4',200),
              jQuery('.gnb>ul>li').removeClass('header_type_1',200),
              jQuery('.gnb>ul>li').removeClass('header_type_2',200),
              jQuery('.gnb>ul>li').removeClass('header_type_3',200),

                 jQuery('.#gnb .active_li').addClass('header_type_2',200),
                 jQuery('.#gnb .active_li').removeClass('header_type_1',200),
                 jQuery('.gnb>ul>li:last-childe').addClass('header_type_2',200),
                 jQuery('.gnb>ul>li:last-child').removeClass('header_type_1',200)
              " width="100px">



<br>
<button onclick="jQuery('.header').addClass('text_type_1',200),
                 jQuery('.header').removeClass('text_type_2',200)"></button>
<button onclick="jQuery('.header').addClass('text_type_2',200),
                 jQuery('.header').removeClass('text_type_1',200)"></button>


<br>
   <button onclick="jQuery('.gnb>ul>li').addClass('menu_type_1',200),
                 jQuery('.gnb>ul>li').removeClass('menu_type_2',200),
                 jQuery('.#gnb .active_li').addClass('menu_type_1',200),
                 jQuery('.#gnb .active_li').removeClass('menu_type_2',200)
                 jQuery('.gnb>ul>li:last-childe').addClass('menu_type_1',200),
                 jQuery('.gnb>ul>li:last-child').removeClass('menu_type_2',200)"></button>

Answer 1

This should work for the images:

$("img[class^='type_']").on("click",function() {
    var curClass = "header_type_"+this.className.split("_")[1];
    $('.xe-clearfix, .fixed_header, .header_wrap, .gnb>ul>li')
        .not(curClass).removeClass()
        .addClass(curClass);

    if (curClass == "header_type_4") {
      $('.gnb .active_li, .gnb>ul>li:last-child').addClass('header_type_2');
      $('.gnb .active_li, .gnb>ul>li:last-child').removeClass('header_type_1');
    }
});

using

<img src="images/header_type1.png" class="type_1" />
<img src="images/header_type2.png" class="type_2" />
<img src="images/header_type3.png" class="type_3" />
<img src="images/header_type4.png" class="type_4" />

Answer 2

As stated on jQuery website:

.removeClass( [className ] )

className Type: String

One or more space-separated classes to be removed from the class attribute of each matched element.

So you can merge them in:

jQuery('.xeclearfix').addClass('header_type_1').removeClass('header_type_2 header_type_3 header_type_4');
jQuery('.fixed_header .header_wrap').addClass('header_type_1').removeClass('header_type_2 header_type_3 header_type_4');
jQuery('.gnb>ul>li').addClass('header_type_1').removeClass('header_type_2 header_type_3 header_type_4');

I'm sure you could get it more clean than this, but we need more info about your code.

Answer 3

1. You can use a function, removing all classes, then adding the one you want.
2. You can use chaining, instead of initiating a lookup for the element each time.
3. (edit) As @Yuri suggested in another answer - do all remove actions in one call

HTML

... onclick="header(1);" ...

JS (in <script> tags, or .js file)

function header(activate) {

              jQuery('.xe-clearfix')
              .removeClass('header_type_1 header_type_2 header_type_3 header_type_4')
              .addClass('header_type_' + activate),


              jQuery('.fixed_header .header_wrap')
              .removeClass('header_type_1 header_type_2 header_type_3 header_type_4')
              .addClass('header_type_' + activate),

              jQuery('.gnb>ul>li')
              .removeClass('header_type_1 header_type_2 header_type_3 header_type_4')
              .addClass('header_type_' + activate),
}