Question

我在walmart.com遇到此页面，页面左侧是一个在客户端完成的复选框过滤系统。当您选中价格复选框时，它会过滤掉品牌并禁用启用/禁用它们等。

当我查看源代码时，复选框没有值，当我试图找到REFINEMENT.clicked事件时，我在下载页面时找不到它。这是一个包含大量代码的非常大的页面，可能需要很长时间才能完成。

我想知道如何在jquery中为客户端实现这个过滤系统。您可以使用存储值的数组，但我如何知道过滤器具有哪些属性，因为每个页面将根据产品类型显示不同的过滤器（价格范围除外）。

如果有人可以指出我正确的方向，或者举例说明该做些什么会有所帮助。

Answer 1

这是一个简单的ajax调用。

这是一个非常相似的问题Filter divs/table rows based on checkbox criteria -Javascript/JQuery

这里检查了url when the top checkbox，结果是JSON回复。

{"dvals":[{"id":"500580", "count":"16"},...

所以他们每次都联系服务器

clicked:function(K){var J=F(K);if(!J.disabled||J.checked){J.checked=!J.checked;ASN.RefinementBox.check(J);}},

check:function(K){try{if(!K.checked){ASN.RefinementBox.uncheck(K.id);ASN.BubbleMsg.bubbleMsg(K.id);}else{if(!REFINEMENT.maximumCheck(K)){A.putDval(K.id);ASN.RefinementBox.sendSelection();ASN.BubbleMsg.bubbleMsg(K.id);}}}catch(J){}},uncheck:function(J){A.removeDval(J);ASN.RefinementBox.sendSelection();}

在页面本身中它有像

这样的东西

WALMART.quicklook.items.push({"itemId":16472509,"price":'<!--Start qlPrevNextPricing Tag--><span class="prevNextDefaultText"><span class="PriceL"></span><span class="bigPriceText2">$398.</span><span class="smallPriceText2">00</span><span></span></span><!--End qlPrevNextPricing Tag-->',"thumbnailURL":"http://i.walmartimages.com/i/p/00/88/61/11/62/0088611162102_60X60.gif"});

类似于持有价格来计算和显示

Answer 2

jQuery的PicNet Table Filter Plugin允许您使用复选框或搜索字段过滤数据表。只需确保您的表包含要过滤的数据，即使它们位于用户看不到的隐藏列中。

复选框过滤系统

2 个答案: