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

Answer 2

LIVE DEMO

只需将您的 categories 包装到父元素 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