[jQuery] Changing Background Image on A tag when clicked not working
Basically all I am doing is on click I am changing the class of the a
tag to have a different background image then the class that is
applied on load. I remove the initial class and replace it with the
new one. Both have different background images but for some it isn't
working. The class changes and everything in firebug shows the correct
class and background image but the image is still the old one. But for
some reason if I double click the a tag it works. Here is the code,
there is a bit more going on but I think you can see what I am trying
to do with the click.
On page load I put the class of open on all the links that also have
the view. I originally had it just for the view class but thought that
might be my issue. when you click the link i toggle another div. If
that div is visible remove the class open that has one background
image and add the class close that has the other. Everything works
perfectly but the background image appearing.
$(".view",".prodcollection-desc li").click(function (){
categoryPage.showHideSubCat(this);
return false;
});
showHideSubCat: function(link){
$(".quick-view", $(link).parent("li")).toggle();
if ($(".quick-view", $(link).parent("li").is(":visible"))){
$(link).removeClass("open");
$(link).addClass("close");
setTimeout(
function() {
$(".quick-view", $(link).parent("li")).hide();
$(link).addClass("open");
$(link).removeClass("close");
}, 7000
);
}
},