我找到了这个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();
});
});
它工作正常,但我在选择按钮中使用此代码。当我选择该选项时,它会过滤掉。 但我实际上有多个选择 - 实际上是 - 但我不知道如何处理这种情况。
例:
项目:草莓,苹果,樱桃,橙子,香蕉,葡萄
选择1 - 所有水果,红色,绿色等
选择2 - 所有形式,圆形,三角形
选择3 - 另一件事,另一件事
用户可以先选择红色 - First Filter 然后他可以选择圆形,所以苹果和樱桃就是答案。
我已经尝试过滤掉只有可见的图像,但是当我尝试将信息带回来时会出现一些错误。
在苹果和樱桃的结果相同的例子中,如果用户选择所有水果,结果必须是苹果,樱桃,橙子和葡萄。
一些建议?
Here is an example code 请注意,过滤器的工作方式是孤立的。
答案 0 :(得分: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');
我正在做三件事:
$(this).parent().attr('class')
$(this).attr('id')
filters
的属性。