单击页面上的某个位置可删除类

Question

我有一组按钮，当单击它们时，会向所有与该按钮无关的div添加一类淡入淡出。我需要当你点击页面上的任何其他地方时，类被删除。我试过了，但它不起作用。

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

此外，我相信有一种更简洁的方式来编写下面的代码，任何关于如何做到这一点的建议或信息都将不胜感激。

代码如下：

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

Answer 1

document是一个对象，去掉它！

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

Answer 2

我在你的JsFiddle上测试，你添加了这个处理程序

$("[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/