CODEWITHSUNDEEP
jquery
Dab0416
Dab0416

Reputation: 59

Click anwhere on page to remove class

I have a group of buttons that when clicked will add a class of fade to all divs not associated with that button. I need the class to be removed when you click anywhere else on the page. I tried this but it is not working. 

 $("document").click(function() {
 $( ".project-category-pennsylvania,.project-category-texas,.project-category-florida,.project-category-georgia,.project-category-louisiana,.project-category-delaware" ).removeClass( "fade" );
});

And also I'm sure there is a more concise way to write the code below, any advice or info on how to do that would be appreciated.

Here is the code:

jQuery(function ($) {

$( ".texas" ).click(function() {
$( ".project-category-texas" ).removeClass( "fade" );
$( ".project-category-florida,.project-category-georgia,.project-category-louisiana,.project-category-delaware,.project-category-pennsylvania" ).addClass( "fade" );
});

$( ".florida" ).click(function() {
$( ".project-category-florida" ).removeClass( "fade" );
$( ".project-category-texas,.project-category-georgia,.project-category-louisiana,.project-category-delaware,.project-category-pennsylvania" ).addClass( "fade" );
});

$( ".georgia" ).click(function() {
$( ".project-category-georgia" ).removeClass( "fade" );
$( ".project-category-texas,.project-category-florida,.project-category-louisiana,.project-category-delaware,.project-category-pennsylvania" ).addClass( "fade" );
});

$( ".louisiana" ).click(function() {
$( ".project-category-louisiana" ).removeClass( "fade" );
$( ".project-category-texas,.project-category-florida,.project-category-georgia,.project-category-delaware,.project-category-pennsylvania" ).addClass( "fade" );
});

$( ".delaware" ).click(function() {
$( ".project-category-delaware" ).removeClass( "fade" );
$( ".project-category-texas,.project-category-florida,.project-category-georgia,.project-category-louisiana,.project-category-pennsylvania" ).addClass( "fade" );
});

$( ".pennsylvania" ).click(function() {
$( ".project-category-pennsylvania" ).removeClass( "fade" );
$( ".project-category-texas,.project-category-florida,.project-category-georgia,.project-category-louisiana,.project-category-delaware" ).addClass( "fade" );
});

$("document").click(function() {
$( ".project-category-pennsylvania,.project-category-texas,.project-category- florida,.project-category-georgia,.project-category-louisiana,.project-category-delaware" ).removeClass( "fade" );
});

});

JSFiddle Here

Upvotes: 0

Views: 39

Answers (2)

LTasty
LTasty

Reputation: 2008

I test on your JsFiddle you add this handler

$("[class^='project-category']*").click(function(){
            $(".project-category-texas,.project-category-florida,.project-category-georgia,.project-category-louisiana,.project-category-delaware,.project-category-pennsylvania").removeClass("fade");
});

http://jsfiddle.net/84ov956w/3/

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

document is an object, unquote it!

$(document).click(function() {
 $( ".project-category-pennsylvania,.project-category-texas,.project-category-florida,.project-category-georgia,.project-category-louisiana,.project-category-delaware" ).removeClass( "fade" );
});

Upvotes: 1

Related Questions