jquery - 使用 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#

enter image description here

在我开始解释问题所在之前， 我想让您明白我上面的网页是“两个”菜单:一个位于页面的最顶部，第二个在您向下滚动到下方时出现。

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

如果你点击第二张图片，它会清除背景颜色#fff，但也会将菜单文本变成白色。

这会造成第二个菜单(称为 .shrink)不可见的情况，因为主菜单的文本颜色和第二个菜单的背景颜色都是白色。

如您所见，我自己编写了这些代码，通过给 .shrink .gnb>ul>li>a 颜色 #333(第二个菜单文本颜色)和 .gnb>ul>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 函数将这些选择器添加在一起(您可以创建一个选择器数组并将其存储在一个变量中，但这不允许您将它们分开，而 merge 稍微更灵活)。

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

不要在 HTML 中使用 onclick 事件(将数据与逻辑分开)。

您甚至可以在变量中设置类名，这会加快速度(并使事情更整洁、更易于维护)。

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

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