使用onClick启用CSS样式

Question

i just found out the weirdest thing that can happen in the jquery and css world.

the code i wrote is the following.

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

and if you just could go to my website and click on the cog button on the left, it will be more easier to explain.

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

enter image description here

before i begin explaining what the problem is, i want you to understand that my webpage above as 'two' menus: one that stays on the very top of the page, and 2nd one that appears when you scroll down below.

now, as you can see, if you click on the first image it sets background color #fff to the main menu bar.

and if you click on the second image, it clears the background color#fff, but also it turnes the menu text white.

This creates a situation where the 2nd menu (it's called the .shrink) is invisible because both the main menu's text color, and the 2nd menu's background color is white.

As you can see, i have written those codes myself to avoid that from happening by giving .shrink .gnb>ul>li>a the color #333 (for the 2nd menu text color) and .gnb>ul>li>a #fff (for the main menu text color)

now, the problem is that, even though i specified all the css classes and attributes that needs to be changed when click on those images on the left panel,

it only changes the css properties of those elements that are 'visible' to you.

excuse my lack of english skill,

what i mean by it is that, even though i set the .shrink .gnb>ul>li>a to be #333 when click on the 2nd image on the left panel,

it doesn't change while the element is invisible from the broswer. (until you scroll down to actually see the div)

originally, if it were to be operating fine, the main menus text color needs to be white and the .shrink .gnb>ul>li>a 's text color should be black when clicking on the 2nd image on the left panel,

but the browser doesn't seem to be able to change it all at once somehow.

im not sure if you all could understand what i am going through right now, but if you could help me out here, help is very much appreciated.

thank you.

Answer 1

This is the way I have done it. (using class names and caching jquery selectors in variables):

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

Forgive the classnames. They are not the most semantic.

Basically any jquery selector that gets reused is better cached in a variable (keeps things quicker and you can change the variable once without having to update all the selectors.

I've used jquery merge function to add these selectors together (you could create an array of selectors and store that in a variable, but that does not allow you to split them up, whereas merge is slightly more flexible).

If you change your css rules into class names you can simply add/remove class names on click.

Don't use onclick events inside your HTML (separate data from logic).

You could even set the classnames in variables and that would speed things up (and make things neater and more maintainable).

There are other improvements that could be made here also.

FIDDLE: http://jsfiddle.net/lharby/ccsLmxgb/

EDIT.

You didn't share any html so I have had to make that up, but it does show that the code works:

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