如何过滤过滤的内容

Question

我在link 中找到了此代码：

$(document).ready(function(){     
    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){        
        //prevent the default behaviour of the link  
        e.preventDefault();       
        //get the id of the clicked link(which is equal to classes of our content  
        var filter = $(this).attr('id');      
        //show all the list items(this is needed to get the hidden ones shown)  
        $('#content ul li').show();       
        /*using the :not attribute and the filter class in it we are selecting 
        only the list items that don't have that class and hide them '*/  
        $('#content ul li:not(.' + filter + ')').hide();      
    });       
}); 

效果很好，但我在选择按钮中使用了此代码。当我选择该选项时，它过滤正常。 但我有不止一个选择 - 实际上是 5 个 - 但我不知道在这种情况下如何处理。

示例：
项目：草莓、苹果、樱桃、橙子、香蕉、葡萄
选择 1 - 所有水果、红色、绿色等
选择 2 - 所有形式、圆角形式、三角形形式。
选择 3 - 完全是另一回事，另一回事

用户可以先选择红色 - First Filter。
那么他可以选择圆形，所以苹果和樱桃就是答案。

我已经尝试只过滤可见图像，但是当我尝试返回信息时出现了一些错误。

在与结果苹果和樱桃相同的示例中，如果用户选择所有水果，则结果必须是苹果、樱桃、橙子和葡萄。

一些建议？

Here is an example code 请注意，过滤器以独立的方式工作。

Answer 1

摆弄：

http://jsfiddle.net/iambriansreed/turMe/

jQuery:

$(document).ready(function(){  

    var filters = {};

    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){        
        e.preventDefault();      
        filters[$(this).parent().attr('class')] = $(this).attr('id');      
        var show = $('#content ul li').filter(function(){                
            for(k in filters)
                if(
                   filters.hasOwnProperty(k) &&
                   !$(this).hasClass(filters[k])
                )
                return false;            
            return true;                
        });
        show.show();            
        $('#content ul li').not(show).hide();            
        $('pre').html(JSON.stringify(filters));            
    });      
}); ​

HTML

<!-- the filters div -->  
<div id='filters'>
<p>Filter One:</p>
<p class="f1" >
    <a href='#' id='allitens'>All</a>
    <a href='#' id='bestof'>Best Of</a>
    <a href='#' id='jquery'>jQuery</a>
    <a href='#' id='php'>PHP</a>
    <a href='#' id='html'>HTML</a>
    <a href='#' id='css'>CSS</a> 
</p>
<p>Filter Two: Begins with letter or Number</p>
    <p class="f2">
<a href='#' id='b1'>B</a> 
<a href='#' id='n1'>1</a>
<a href='#' id='H'>H</a>
    </p>
</div>  


    <!-- the content div -->  
    <div id='content'>  
        <!-- the unordered list where we store the content in list items -->  
        <ul>  
          ...
        </ul>  
</div>  
Filters
<pre></pre>

我创建了一个对象，然后将所有过滤器分配给该对象。然后我过滤掉不符合条件的 DOM 元素。这现在适用于任意数量的过滤器。

在这一行：

filters[$(this).parent().attr('class')] = $(this).attr('id');

我正在做三件事：

1. 获取点击链接的父级（段落标签）的类属性。 $(this).parent().attr('class')
2. 获取点击链接的 ID。
   $(this).attr('id')
3. 使用 1 中定义的键和 2 中定义的值添加或覆盖对象 filters 的属性。