使用onClick启用CSS样式

Question

我刚刚发现在jquery和css世界中可能发生的最奇怪的事情。

我写的代码如下。

<img src="images/header_type1.png" 
     onclick="jQuery('.xe-clearfix').css('background-color','#fff'),
              jQuery('.gnb>ul>li>a').css('color','#333'),
              jQuery('.logo_text').css('color','#333')">
<img src="images/header_type2.png" 
     onclick="jQuery('.xe-clearfix').css('background-color','transparent'),
              jQuery('.gnb>ul>li>a').css('color','#fff'),
              jQuery('.logo_text').css('color','#fff'),
              jQuery('.shrink .gnb>ul>li>a').css('color','#333'),
              jQuery('.shrink .logo_text').css('color','#333')">

如果您可以访问我的网站并单击左侧的齿轮按钮，则说明起来会更加容易。

http://lifeto.cafe24.com/xe/page_cwmV35#

在此处输入图片说明

在我开始解释问题是什么之前，我想让您了解我的网页上面的“两个”菜单：一个停留在页面顶部，而第二个出现在您向下滚动时。

如您所见，现在，如果您单击第一张图像，它将在主菜单栏中设置背景色#fff。

如果您单击第二个图像，它将清除背景颜色#fff，但也会将菜单文本变为白色。

这将导致第二个菜单（称为.shrink）不可见的情况，因为主菜单的文本颜色和第二个菜单的背景颜色均为白色。

如您所见，我亲自编写了这些代码，以免出现这种情况，方法是为.shrink .gnb> ul> li> a指定＃333的颜色（用于第二个菜单文本的颜色），并为.gnb> ul> li> li> a＃ fff（用于主菜单文本颜色）

现在的问题是，即使我在单击左侧面板上的那些图像时指定了所有需要更改的css类和属性，

它只会更改您“可见”的那些元素的css属性。

请原谅我英语水平不足，

我的意思是，即使单击左侧面板上的第二个图像时，即使将.shrink .gnb> ul> li> a设置为＃333，

当元素在浏览器中不可见时，它不会改变。 （直到您向下滚动才能看到div）

最初，如果要正常运行，则在单击左侧面板上的第二个图像时，主菜单的文本颜色必须为白色，并且.shrink .gnb> ul> li> a的文本颜色应为黑色，

但浏览器似乎无法立即以某种方式进行更改。

我不确定大家是否都能理解我现在正在经历的事情，但是如果您能在这里帮助我，非常感谢您的帮助。

谢谢。

Answer 1

这就是我做到的方式。 （使用类名并在变量中缓存jquery选择器）：

var img1 = $('#imgOne');
var img2 = $('#imgTwo');
var xeClearfix = $('.xe-clearfix');
var navA = $('.gnb>li>a');
var logoText = $('.logo_text');
var merge1 = $.merge(xeClearfix, navA, logoText);

img1.on('click', function(){
    merge1.removeClass('bgTrans textWhite').addClass('bgWhite textGrey');
});

img2.on('click', function(){
    merge1.removeClass('bgWhite textGrey').addClass('bgTrans textWhite');
});

原谅类名。 它们不是最语义化的。

基本上，任何可以重用的jQuery选择器都可以更好地缓存在变量中（可以更快地保存内容，您可以一次更改该变量，而不必更新所有选择器。

我使用了jquery merge函数将这些选择器添加在一起（您可以创建一个选择器数组并将其存储在变量中，但这不允许您拆分它们，而合并则稍微灵活一些）。

如果将CSS规则更改为类名，则只需单击即可添加/删除类名。

不要在HTML内部使用onclick事件（将数据与逻辑分开）。

您甚至可以在变量中设置类名，这样可以加快处理速度（并使处理更整洁，更易于维护）。

这里还可以进行其他改进。

内容： http : //jsfiddle.net/lharby/ccsLmxgb/

编辑。

您没有共享任何html，因此我不得不进行修改，但这确实表明该代码有效：

<img src="http://placehold.it/350x150" id="imgOne">
<img src="http://placehold.it/350x50" id="imgTwo">

    <div class="xe-clearfix">XE clearfix

        <nav class="gnb">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </nav>

    </div>

    <div class="wrapper">
         <nav class="gnb">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </nav>
    </div>