Есть ли способ упростить эти коды jquery?

Мой сайт находится здесь: http://www.xestudio.xco.kr , и если вы нажмете на кнопку cog на левой панели, вы увидите ситуацию.Есть ли способ упростить эти коды jquery?

Чтобы объяснить свою ситуацию, я просто скажу, что у меня есть этот сайт, который называется «Создатель веб-сайта», и важная функциональность веб-сайта заключается в том, чтобы легко манипулировать всеми параметрами, щелкая по пользовательскому интерфейсу.

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

Проблема заключается в том, что для тех функций, чтобы работать, я должен поставить в очереди возможности в рассмотрение, а это означает, что коды должны включать в себя

«removeClass типа заголовок 1,2,3,4,5 , 6,7,8 'и' addClass header type 9 ' и так далее, список можно продолжить.

Есть ли способ упростить эти коды? Я боюсь, что мой сайт пойдет крушением, если я ничего не сделаю. lol

и здесь указаны точные коды, используемые mywebsite.

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

источник

2015-11-23 Mark

Split код в небольших функций и вызывать их в OnClick (или использовать JQuery для добавления обработчиков OnClick :) –

Я могу только понять, что вы подразумеваете под этим ... можете ли вы быть более конкретным? им новый стартер. :) – Mark

http://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard может помочь – drys

Это должно работать для изображений:

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

использованием

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

источник

2015-11-23 14:01:05 mplungjan

святой, моли. благодаря! – Mark

, но только из любопытства, почему вы должны были исключить. # Gnb .active_li, .gnb> ul> li: last-child из первой строки? ничего плохого? ой. это потому, что у моего css не было всех версий. – Mark

На самом деле '. # Gnb', скорее всего, ошибочно – mplungjan

Вы можете использовать функцию, удаляя все классы, а затем добавить тот, который вы хотите.
Вы можете использовать цепочку, вместо того, чтобы каждый раз запускать поиск элемента.
(редактировать) Как @Yuri предложил в другой ответ - сделать все удалить действия в одном вызове

HTML

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

JS (в < SCRIPT> теги, или .js файл)

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), 
}

источник

2015-11-23 13:40:48 JNF

Я вижу. спасибо за Ваш ответ. Я ценю оба ваших ответа, но я могу только задать один ответ в качестве своего выбора. просто из любопытства, какая разница делает это «активировать»? – Mark

Сохраняет необходимость ввода команд снова и снова. Это параметр, который имеет правильное значение каждый раз. – JNF

Как указано на сайте jQuery:

.removeClass ([имя класса])

имя класса Тип: Строка

Один или несколько разделенных пробелами классов, которые будут удалены из атрибута класса для каждого элемента.

Таким образом, вы можете объединить их в:

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

Я уверен, что вы могли бы получить его более чистым, чем это, но нам нужно больше информации о вашем коде.

источник

2015-11-23 13:42:10 Yuri

Есть ли способ упростить эти коды jquery?

ответ

Смежные вопросы