用jQuery进行滤波

Question

关于场景，请参见下文。我正在制作一个目录，我希望能够通过两种方式过滤#苹果、#动物、#香蕉、#豆子、#斗篷、#猫、#狗、#粪便项目:按类别(.services、.technology、.referral或.reseller)和按首字母过滤(.a、.b、.c、.d)。如果我单击#services，它应该隐藏所有其他类(.technology、.referral、.reseller)，如果我单击#a，它应该隐藏不以字母"a“开头的所有其他项。

这本身就很好，但我遇到麻烦的地方是，如果我单击#services，然后单击#a，显示非服务项。我不想这样。相反，我希望能够单击#，然后单击#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

现场演示

只需将类别包装为父元素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