请参阅下面的方案。我正在制作一个目录，我希望能够以两种方式过滤＃apple，＃animal，＃banana，＃beans，＃view，＃cat，＃dog，＃dung项目：按类别（.services ，.technology，.referral或.reseller）和第一个字母（.a，.b，.c，.d）。如果我点击#services，它应该隐藏所有其他类（.technology，.referral，.reseller），如果我点击#a，它应该隐藏所有其他不以字母“a”开头的项目。
这单独工作很好，但我遇到麻烦的是如果我点击#services，然后我点击#a，非服务项目显示。我不希望这样。 相反，我希望能够单击#services，然后单击#a，并且只能看到以.service类开头的字母a;如何实现？
我对jquery很新，所以我为这个混乱道歉。不知道如何问这个看似简单的jQuery过滤问题。非常感谢帮助！
情景：
我有以下html：
<div id="container">
<div id="nav">
<ul>
<li id="services"><a href="#">Services</a></li>
<li id="technology"><a href="#">Technology</a></li>
<li id="referral"><a href="#">Referral</a></li>
<li id="reseller"><a href="#">Reseller</a></li>
</ul>
</div>
<div id="abs-filer-nav>
<a href="#" id="a">A</a>
<a href="#" id="b">B</a>
<a href="#" id="c">C</a>
<a href="#" id="d">D</a>
</div>
<div id = "apple" class="technology"></div>
<div id = "animal" class="services"></div>
<div id = "banana" class="services"></div>
<div id = "beans" class="referral"></div>
<div id = "cape" class="referral"></div>
<div id = "cat" class="reseller"></div>
<div id = "dog" class="reseller">
<div id = "dung" class="technology">
以及以下jQuery：
$(document).ready(function() {
$('#all').addClass("active");
$('#all').click(function() {
$('.services, .reseller, .technology,.referral').fadeIn("fast");
$(this).addClass("active");
$('#services, #reseller,#technology').removeClass("active");
});
$('#technology').click(function() {
$('.services, .reseller,.referral').fadeOut("fast");
$('.technology').fadeIn("fast");
$(this).addClass("active");
$(this).addClass("immune")
$('#services, #reseller,#all,#referral').removeClass("active");
$('#services_class').toggleHide("fast");
});
$('#services').click(function() {
$('.technology, .reseller,.referral').fadeOut("fast");
$('#services_class').show("fast");
$('.services').fadeIn("fast");
$(this).addClass("active");
$('#all, #reseller,#technology,#referral').removeClass("active");
});
$('#reseller').click(function() {
$('.services, .technology,.referral').fadeOut("fast");
$('.reseller').fadeIn("fast");
$(this).addClass("active");
$('#services, #all,#technology,#referral').removeClass("active");
});
$('#referral').click(function() {
$('.services, .technology,.reseller').fadeOut("fast");
$('.referral').fadeIn("fast");
$(this).addClass("active");
$('#services, #all,#technology').removeClass("active");
});
$('#a').click(function() {
$('.b,.c,.d').fadeOut("fast");
$('.a').fadeIn("fast");
$(this).addClass("active");
$('.b,.c,.d').removeClass("fast");
})
$('#b').click(function() {
$('.a,.c,.d').fadeOut("fast");
$('.b').fadeIn("fast");
$('.immune').fadeIn("fast");
$(this).addClass("active");
$('.a,.c,.d').removeClass("fast");
})
$('#c').click(function() {
$('.a,.b,.d').fadeOut("fast");
$('.c').fadeIn("fast");
$(this).addClass("active");
$('.a,.b,.d').removeClass("fast");
})
$('#d').click(function() {
$('.a,.b,.c').fadeOut("fast");
$('.d').fadeIn("fast");
$(this).addClass("active");
$('.a,.b,.c').removeClass("fast");
})
});
答案 0 :(得分：1)
它可能不是最佳实施，但符合您列出的要求 - http://jsfiddle.net/VbVr6/
*如果您想要过滤到具有以字母开头的“id”的元素，以下是一个示例：http://jsfiddle.net/VbVr6/1/
<div id="container">
<div id="nav">
<ul>
<li id="services"><a href="#">Services</a></li>
<li id="technology"><a href="#">Technology</a></li>
<li id="referral"><a href="#">Referral</a></li>
<li id="reseller"><a href="#">Reseller</a></li>
</ul>
</div>
<div id="abs-filer-nav">
<a href="#" id="a">A</a>
<a href="#" id="b">B</a>
<a href="#" id="c">C</a>
<a href="#" id="d">D</a>
</div>
<div id = "apple" class="nav technology d">apple - tech</div>
<div id = "animal" class="nav services a">animal - serv</div>
<div id = "banana" class="nav services b">banana - serv</div>
<div id = "beans" class="nav referral a b">beans - ref</div>
<div id = "cape" class="nav referral c">cape - ref</div>
<div id = "cat" class="nav reseller d">cat - resell</div>
</div>
脚本：
var navFilter;
var letterFilter;
function applyFilter() {
if (navFilter || letterFilter) {
// Get a selector of the item you want to show.
// If it has a navFilter currently selected, start with that (i.e. .technology)
// If it has a letter, add that to the selector (i.e. .a).
// If both filters are present, require both classes (i.e. .technology.a)
var classes = (navFilter ? "." + navFilter : "") + (letterFilter ? "." + letterFilter : "");
// Select all .nav elements that don't match our selector and hide them
$(".nav:not(" + classes + ")").animate({
height:0,
opacity:0
});
// Select all elements that DO match our selector and show them
$(classes).animate({
height:20,
opacity:1
});
}
}
// When you click on any 'li' element in the #nav element
$("#nav li").click(function (e) {
// Clear any existing highlight
$("#nav li").css("background-color", "#ffffff");
// Highlight the selected item
$(this).css("background-color", "#cccccc");
// Update the selected nav filter
navFilter = this.id;
// Reapply filters, so it hides/shows elements using the new filter
applyFilter();
});
// When you click on any 'li' element in the #abs-filer-nav element
$("#abs-filer-nav a").click(function (e) {
// Highlight the selected item
$("#abs-filer-nav a").css("background-color", "#ffffff");
// Highlight the selected item
$(this).css("background-color", "#cccccc");
// Update the selected letter filter
letterFilter = this.id;
// Reapply filters, so it hides/shows elements using the new filter
applyFilter();
});
答案 1 :(得分：0)
<强> LIVE DEMO
只需将类别包装到父元素ID中即可：
<div id="categories">
<div id="apple" class="technology">apple</div>
<div id="animal" class="services">animal</div>
<!-- ... -->
</div>
您所需要的一切：
var $cat = $('#categories > div');
function showCategories( e ) {
e.preventDefault();
var id = this.id;
$cat.hide().filter(id.length>1 ? "."+id : "[id^="+id+"]").show();
}
$('#nav li, #abs-filer-nav a').click( showCategories );
<强>解释
虽然代码一般（我删除淡入淡出和类的东西的部分）看起来微不足道，
让我们探索显示类别功能：
$( // Get elements into jQ collection
elID.length>1 ? // Is this.id a word (not a single char.) ?
"."+elID : // Than get all classElements with this.id
"[id^="+elID+"]" // Else get all elements which ID starts with (^) this.id
, $cat) // Look only inside $('#categories') element