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>

Split the code in small functions and call them in the onclick(or use jQuery to add on-click handlers :) — Silviu Burcea, Nov 23 '15 at 13:38
I can only get slightest sense of what you mean by that.. can you be more specific? im a new starter. :) — Mark, Nov 23 '15 at 13:40
http://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard can help — drys, Nov 23 '15 at 13:44

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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.

JNF · Answer 2 · 2015-11-23T13:47:15.240

You can use a function, removing all classes, then adding the one you want.
You can use chaining, instead of initiating a lookup for the element each time.
(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),
}

I see. thanks for your answer. i appreciate both of your answers but i can only set one answer as my choice. just out of curiosity, what difference does that 'activate' make? — Mark, Nov 23 '15 at 13:51
Saves the need to type the commands over and over. It's the parameter that holds the correct value each time. — JNF, Nov 23 '15 at 15:06

mplungjan · Accepted Answer · 2015-11-23T15:21:58.643

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" />

but just out of curiosity, why did you have to exclude .#gnb .active_li, .gnb>ul>li:last-child from the first line? anything wrong? oh. that's because my css didn't have all versions of them. — Mark, Nov 23 '15 at 14:41

Is there a smart way to simplify these jquery codes?

3 Answers3