CODEWITHSUNDEEP
jqueryjquery-selectors
chrisrth
chrisrth

Reputation: 1212

.css() not changing until second click - using shared class selector

I am using a lightbox triggered by many elements. I need to alter the style (light to dark) when one unique element is clicked so I added an id to that element. I then force the css default on each click of lightbox but added an override on the #saved id. I am still learning jquery. Assuming I may need to unload that first click function.

What happens is that if #saved is clicked it is always ignored however it works fine the second time forward. Even clicking from .lightbox to #saved elements back and forth triggers properly. Addditionally if a .lightbox element is clicked first, then #saved - #saved lunches with the correct css. In conclusion the only time this fails on the first click is if #saved is the first element with a class of .lightbox that is clicked.

HTML:

Typical
<a href="/" class="lightbox">click me</a>

Unique
<a href="/" class="lightbox" id="saved">click me too</a>

JavaScript:

$(document).ready(function() {
var cssLB='.jquery-lightbox-mode-html .jquery-lightbox-background,.jquery-lightbox-loading,.jquery-lightbox-mode-html .jquery-lightbox-loading';

$('.lightbox').lightbox().click(function(){$(cssLB).css('background','#FFF url(/inc/img/loading.gif) no-repeat center center;')});

$('#saved').click(function(){
  $(cssLB).css('background','#000 url(/inc/img/loading-dark.gif)');
});

Upvotes: 1

Views: 1513

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

To avoid situations where you cannot determine the order the event handlers are called, you should do a single bind and identify the best route from there..

Also you should use classes instead of manually changing the CSS.

CSS

.typical{background: #FFF url(/inc/img/loading.gif) no-repeat center center;}
.unique{background: #000 url(/inc/img/loading-dark.gif);}

jQuery

$(document).ready(function() {
    var cssLB='.jquery-lightbox-mode-html .jquery-lightbox-background,.jquery-lightbox-loading,.jquery-lightbox-mode-html .jquery-lightbox-loading';

    $('.lightbox').lightbox().click(function(){
        if ( $(this).is('#saved') ){
            $(cssLB).removeClass('typical').addClass('unique');
        } else {
            $(cssLB).removeClass('unique').addClass('typical');
        }

    });
});

Additionally, if you have multiple elements that are saved then you should use a class instead of an id, as those should be unique..

Update

A note : the second class in your cssLB variable includes the third class. So you might want to remove the 3rd one.. (for performance).

CSS precedence : If these classes have the background property defined, then you will have to increase the specificity of the typical and unique classes or apply the !important declaration to enforce them.

Using !important

.typical{background: #FFF url(/inc/img/loading.gif) no-repeat center center!important;}
.unique{background: #000 url(/inc/img/loading-dark.gif)!important;}

Using increased specificity

.jquery-lightbox-mode-html .jquery-lightbox-background .typical,
.jquery-lightbox-loading .typical,
.jquery-lightbox-mode-html .jquery-lightbox-loading .typical {
    background: #FFF url(/inc/img/loading.gif) no-repeat center center;
}
.jquery-lightbox-mode-html .jquery-lightbox-background .unique,
.jquery-lightbox-loading .unique,
.jquery-lightbox-mode-html .jquery-lightbox-loading .unique{
    background: #000 url(/inc/img/loading-dark.gif);
}

Upvotes: 3

Related Questions