通过 DOM 通过 checkboxex 过滤列表 Div

Question

基于我之前在这里提出的问题： 通过复选框过滤列表 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

您的示例代码将不起作用，因为您无法为列表中的 show() 和 hide() 项目授予过滤权限。一般来说，过滤器应该是 show() 或 hide() （或类似的），在这种情况下它应该是 hide()。

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

人们很容易认为您可以以相反的方式做事 - 即最初隐藏()所有项目，然后允许过滤器有选择地show()。但这是行不通的，因为任何单独的过滤器都不应该拥有 show() 的权限 - 其他过滤器可能有不同的意见！使用这种类型的过滤器集，您希望项目仅在满足所有条件（而不是任何条件）时才显示。

这是一些代码：

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);