我使用isotope.js对60名曲棍球运动员进行排序。第一次单击该按钮会添加一个is-active类并按顺序排列玩家，但是再次单击它会删除is-active类的类别并过滤回来以便我可以看到所有60球员了。
当我点击First Name，Hometown和Games Played的按钮时，他们不会在删除filter:all课程时显示所有玩家is-active < / p>
$(".btn--list").on("click", function(){
$(".btn--list").not(this).addClass("not-selected");
// Decade
if ($(this).hasClass("btn--1960 is-selected")) {
$grid.isotope({filter: ".year--1960"});
$(".none").show();
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--1970 is-selected")) {
$grid.isotope({filter: ".year--1970"});
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--1980 is-selected")) {
$grid.isotope({filter: ".year--1980"});
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--1990 is-selected")) {
$grid.isotope({filter: ".year--1990"});
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--2000 is-selected")) {
$grid.isotope({filter: ".year--2000"});
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--2010 is-selected")) {
$grid.isotope({filter: ".year--2010"});
$(".btn--all").removeClass("is-selected");
// Position
} else if ($(this).hasClass("btn--goalie is-selected")) {
$grid.isotope({filter: ".player--goalie"});
$(".btn--all").removeClass("is-selected");
$(".not--goalie").css({
"display": "none",
"height": "0px"
});
} else if ($(this).hasClass("btn--defencemen is-selected")) {
$grid.isotope({filter: ".player--defencemen"});
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--forward is-selected")) {
$grid.isotope({filter: ".player--forward"});
$(".btn--all").removeClass("is-selected");
// Sort by
} else if ($(this).hasClass("btn--name is-selected")) {
$grid.isotope({ sortBy: "name" });
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--hometown is-selected")) {
$grid.isotope({ sortBy: "hometown" });
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--gamesp is-selected")) {
$grid.isotope({ sortBy: "gamesPlayed" });
$(".btn--all").removeClass("is-selected");
// `.not--goalie`
} else if ($(this).hasClass("btn--goals is-selected")) {
$grid.isotope({ sortBy: "goals" });
$(".btn--all").removeClass("is-selected");
$grid.isotope({ filter: ".player--defencemen, .player--forward" })
} else if ($(this).hasClass("btn--assists is-selected")) {
$grid.isotope({ sortBy: "assists" });
$(".btn--all").removeClass("is-selected");
$grid.isotope({ filter: ".player--defencemen, .player--forward" })
} else if ($(this).hasClass("btn--points is-selected")) {
$grid.isotope({ sortBy: "points" });
$(".btn--all").removeClass("is-selected");
$grid.isotope({ filter: ".player--defencemen, .player--forward" })
} else if ($(this).hasClass("btn--penalty is-selected")) {
$grid.isotope({ sortBy: "penaltyMinutes" });
$(".btn--all").removeClass("is-selected");
$grid.isotope({ filter: ".player--defencemen, .player--forward" })
// These goalie buttons have the correct behaviour
} else if ($(this).hasClass("btn--goalsagainst is-selected")) {
$grid.isotope({ filter: ".player--goalie"});
$grid.isotope({ filter: "goalsAgainst" });
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--savepercent is-selected")) {
$grid.isotope({ filter: ".player--goalie"});
$grid.isotope({ filter: "savePercentage" });
$(".btn--all").removeClass("is-selected");
} else if ($(this).hasClass("btn--shutouts is-selected")) {
$grid.isotope({ filter: ".player--goalie"});
$grid.isotope({ filter: "shutouts" });
$(".btn--all").removeClass("is-selected");
} else {
$(".btn--list").not(this).removeClass("not-selected");
$grid.isotope({ filter: '*' });
$(".btn--all").addClass("is-selected");
$(".none").hide();
$(".not--goalie").css({
"display": "block",
"height": "100%",
"padding-top": "12px",
});
}
});
<ul>
<li><h2>Filters</h2></li>
<li class="filter--all"><button class="btn--list btn--all is-selected">Select All</button></li>
<li><h2>Decade</h2></li>
<li><button class="btn--list btn--1960">1960s</button></li>
<li><button class="btn--list btn--1970">1970s</button></li>
<li><button class="btn--list btn--1980">1980s</button></li>
<li><button class="btn--list btn--1990">1990s</button></li>
<li><button class="btn--list btn--2000">2000s</button></li>
<li><button class="btn--list btn--2010">2010s</button></li>
<li><h2>Position</h2></li>
<li><button class="btn--list btn--goalie">Goalie</button></li>
<li><button class="btn--list btn--defencemen">Defenceman</button></li>
<li><button class="btn--list btn--forward">Forward</button></li>
<li><h2>Other</h2></li>
<li><button class="btn--list btn--name">First Name</button></li>
<li><button class="btn--list btn--hometown">Hometown</button></li>
<li><button class="btn--list btn--gamesp">Games Played</button></li>
<li class="not--goalie not--goals"><button class="btn--list btn--goals">Goals</button></li>
<li class="not--goalie not-assists"><button class="btn--list btn--assists">Assists</button></li>
<li class="not--goalie not-points"><button class="btn--list btn--points">Points</button></li>
<li class="not--goalie not-penalty"><button class="btn--list btn--penalty">Penalty Minutes</button></li>
<li><button class="btn--list btn--goalsagainst">Goals Against <span class="is-highlighted">*</span></button></li>
<li><button class="btn--list btn--savepercent">Save Percentage <span class="is-highlighted">*</span></button></li>
<li><button class="btn--list btn--shutouts">Shutouts <span class="is-highlighted">*</span></button></li>
</ul>