jquery - 使用 jQuery 过滤

Question

请参阅下面的场景。我正在制作一个目录，我希望能够以两种方式过滤#apple、#animal、#banana、#beans、#cape、#cat、#dog、#dung 元素:按类别(.services 、.technology、.referral 或 .reseller)和首字母(.a、.b、.c、.d)。如果我点击#services，它应该隐藏所有其他类(.technology、.referral、.reseller)，如果我点击#a，它应该隐藏所有其他不以字母“a”开头的元素。

这单独使用效果很好，但我遇到问题的地方是如果我单击#services，然后单击#a，显示非服务元素。我不想要那个。 相反，我希望能够单击#services，然后单击#a，然后只看到具有以字母 a 开头的 .service 类的元素；这将如何实现？

我是 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");
    })          
});

Answer 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();
});