我花了几个小时为在线商家网站构建一个简单的可排序搜索结果。它的工作方式是从搜索页面获取 html 模板,同时使用 ajax 执行搜索。检索 json 数据,然后创建 div 元素。我已经完成了sort
,per
, and direction
排序,但现在我被困在filter
排序,我真的不知道从哪里开始最后一个。
最后一个排序函数需要迭代每个 div,检查所选属性是否为 1 或 0。如果属性为 0,则hide
需要为 div 切换类。
我的问题是:
- 如何访问当前选定的div
each()
- 如何检查datatarget是否等于0。
如果为 0,则隐藏它,或者
- 如何继续下一次迭代
each()
如果不是。
我想要实现的目标的简短伪代码:
$('div.item').each(function(){
datartarget = (datatarget == 0) ? currentdiv.hide() : datatarget;
});
这是我的完整jQuery
code:
$(function(){
var last_selector = null;
last_selector = $('.filter , .sort, .per, .direction').click(function(){
var clname = this.className;
var direction = $('#direction > dd.active > a').attr('data-target');
$('.sub-nav.'+clname+'').find('dd.active').removeClass('active');
$(this).parent().addClass('active');
var datatarget = $(this).attr('data-target');
if(clname == 'sort')
{
$('div.item').tsort({order:direction,attr: datatarget+'-data'});
last_selector = datatarget;
}
if(clname == 'filter')
{
last_selector = (last_selector == null) ? last_selector : $('#sort dd.active > a').attr('data-target');
$('div.item').each(function(){
//have no idea where to start )-:
})
}
if(clname == 'per')
{
last_selector = (last_selector == null) ? last_selector : $('#sort dd.active > a').attr('data-target');
var item_count = $('div.item').length;
if(item_count > datatarget)
{
while (item_count > datatarget) {
$('div.item:last-child').toggleClass('hide');
item_count = $('div.item').length;
}
}
if(item_count < datatarget)
{
$('div.item.hide').toggleClass('hide');
while (item_count > datatarget) {
$('div.item:last-child').toggleClass('hide');
item_count = $('div.item').length;
}
}
}
if(clname == 'direction')
{
direction = $(this).attr('data-target');
datatarget = (last_selector == null) ? last_selector : 'price';
$('div.item').tsort({order:direction,attr: datatarget+'-data'});
}
return last_selector;
});
});
和html
下拉选择 div(提供datatarget
对于点击功能):
<a data-dropdown="direction" class="button dropdown">Direction Order</a>
<dl id="direction" data-dropdown-content class="sub-nav direction f-dropdown content">
<dt><strong>Direction:</strong></dt>
<dd class="active"><a class="direction" data-target="desc">Down</a></dd>
<dd><a class="direction" data-target="asc">Up</a></dd>
</dl>
<a data-dropdown="filter-by" class="button dropdown">Filter Results</a>
<dl id="filter-by" data-dropdown-content class="sub-nav filter f-dropdown content">
<dt><strong>Filter Results:</strong></dt>
<dd class="active"><a class="filter" data-target="new">Newest</a></dd>
<dd><a class="filter" data-target="endsoon">Ending Soon</a></dd>
<dd><a class="filter" data-target="reserve">No Reserve</a></dd>
<dd><a class="filter" data-target="buyitnow">Buy It Now</a></dd>
<dd><a class="filter" data-target="all">All</a></dd>
</dl>
<a data-dropdown="sort-by" class="button dropdown">Sort Results</a>
<dl id="sort-by" data-dropdown-content class="sub-nav sort f-dropdown content">
<dt><strong>Sort By:</strong></dt>
<dd class="active"><a class="sort" data-target="end">End Time</a></dd>
<dd><a class="sort" data-target="price">Price</a></dd>
<dd><a class="sort" data-target="seller">Seller Reputation</a></dd>
</dl>
<a data-dropdown="results-per" class="button dropdown">Results Per Page</a>
<dl id="results-per" data-dropdown-content class="sub-nav per f-dropdown content">
<dt><strong>Per Page:</strong></dt>
<dd class="active"><a class="per" data-target="100">100</a></dd>
<dd><a class="per" data-target="75">75</a></dd>
<dd><a class="per" data-target="50">50</a></dd>
<dd><a class="per" data-target="25">25</a></dd>
</dl>