我花了几个小时为在线商人站点构建简单的可排序搜索结果。它的工作方式是从搜索页面中获取html模板,而使用ajax进行搜索。检索json数据,然后创建div元素。我已经完成了sort
,per
和direction
排序,但是现在我陷入了困境filter
,我真的不知道从哪一个开始。
最后一个排序函数需要遍历每个div,检查所选属性的1或0。如果属性为0,则hide
需要为div切换类。
我的问题是:
each()
each()
如果不是,如何继续下一次迭代。我正在尝试实现的简短伪代码:
$('div.item').each(function(){
datartarget = (datatarget == 0) ? currentdiv.hide() : datatarget;
});
这是我的完整jQuery
代码:
$(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
click函数提供):
<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>
多亏了barmar的帮助,我回答了我自己的问题。
我感到困惑,因为我没意识到那this
会在内部反弹each()
。
以下内容实现了我的目标,即先取消隐藏任何隐藏元素,然后应用新的过滤器,以更改当前过滤器。
if(clname == 'filter')
{
$('div.item.hide').toggleClass('hide');
last_selector = (last_selector == null) ? last_selector : $('#sort dd.active > a').attr('data-target');
$('div.item').each(function(){
($(this).attr(datatarget+'-data') == 0) ? $(this).hide() : false;
});
}
当然,这仅解决基本功能。我仍然必须修改它以维持每页结果的规则。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句