Фильтровать список Div'ов через checkboxex через DOM

Question

основанный на моем предыдущем вопросе, заданном здесь: Список фильтров Jquery 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().

Вам будет удобнее организовать код в "главный" фильтр, который вызывает фильтр "спальня" и (в конце концов) другие фильтры. Мастер должен обеспечить первоначальное отображение всех элементов списка, чтобы фильтры могли их выборочно скрывать.

Заманчиво подумать, что вы могли бы альтернативно сделать что-то наоборот - а именно, 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);