Question

我的网站在这里：http://www.xestudio.xco.kr 如果单击左侧面板上的cog按钮，则可以看到情况。

为了解释我的情况，我只想说，我有一个名为“网站建设者”的网站。在我看来，网站的关键功能是通过点击用户界面轻松操作所有选项。

我为每种不同的标题样式，正文样式，页脚样式等创建了许多按钮，这些按钮会在点击这些按钮时激活，以便更改网站的样式。

问题在于，为了使这些功能起作用，我必须考虑所有可能性，这意味着代码必须包括

＆＃39; removeClass标题类型1,2,3,4,5,6,7,8＆＃39; AND＆＃39; addClass标题类型9＆＃39; 等等，列表继续。

无论如何我可以简化这些代码吗？我担心如果我不做任何事情，我的网站就会崩溃。洛尔

以下是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>

Answer 1

正如jQuery网站上所述：

.removeClass（[className]）

的className   类型：字符串

要从每个匹配元素的class属性中删除一个或多个以空格分隔的类。

所以你可以把它们合并在一起：

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

我确定你可以比这更干净，但我们需要更多关于你的代码的信息。

有简化这些jquery代码的聪明方法吗？

1 个答案: