通过DOM过滤列表Div的via checkboxex

基于我之前提出的问题： Jqueryfilter列表DIV通过复选框我遇到的情况是当复选框和列表都是从javascript生成的，所以如果我查看源代码我看不到它们。 我设法找出我可以通过以下方式访问复选框：

$(".bedroomType").attr("type", "input").change(function(){} 

但我不能使列表过滤…在这种情况下如何更改此代码？

  $(".bedroomType").attr("type", "input").change(function(){ $(".bedroomType").attr("type", "input").each(function(){ var checked = $(this).attr('checked') || false; var numberofrooms = $(this).data('bedrooms'); alert(numberofrooms); $('.listing').each(function(){ if ($(this).data('bedrooms')==numberofrooms){ checked ? $(this).show() : $(this).hide(); } }); }); 

谢谢

Answer 1

您的示例代码将无法使用，因为您无法将filter权限赋予列表中的show()和hide()项。 通常，filter应该show()或hide() （或类似），在这种情况下它应该hide() 。

您会发现将代码组织到“主”filter中更方便，该filter调用“卧室”filter和（最终）其他filter。 主人应确保最初显示所有列表项，以便filter可以选择性地隐藏它们。

很有可能认为你可以选择反过来做事 – 即最初hide()所有项目，然后允许filter有选择地show() 。 但这不起作用，因为没有单独的filter应该有权show() – 其他filter可能有不同的意见！ 使用此类型的filter集，您希望项目仅在满足所有条件时显示，而不是任何条件。

这是一些代码：

 function filterListingByBedrooms($listing){ var selectedBeds = []; $(".bedroomType").each(function(){ if(this.checked) { selectedBeds.push($(this).data('bedrooms'));//build array of checked bedroom numbers } }); $listing.each(function(){ var $this = $(this); if(!$.inArray($this.data('bedrooms'), selectedBeds)) { $this.hide(); } }); } function filterListingByType($listing){ ...; } function filterListingByLocation($listing){ ...; } function filterListing(){ var $listing = $('.listing').show();//Initially show all, then allow filters to selectively hide. filterListingByBedrooms($listing); filterListingByType($listing);//apply other filter filterListingByLocation($listing);//apply other filter }; $(".bedroomType").change(filterListing); $(".propertyType").change(filterListing); $(".location").change(filterListing);