Jquery Filter List DIVs с помощью флажков

Question

Здравствуйте, у меня есть список квартир, и мне нужно отфильтровать их по типу (например, студия, 1 спальня, 2 спальни.) С помощью флажков.Вы можете увидеть демо на http://jsfiddle.net/YByCk/1/ Я не знаю, как это сделать, если вы выберете, например, 1 Спальни и 2 Спальни, чтобы показать результаты для 1 и 2 спален, если 1 уже отмечена.Проблема в том, что, когда вы установите второй флажок, будет отображаться только последний фильтр флажков, не останутся также и другие выбранные флажки.

//function count results after filter
 function divcount()
 {
     var resCount =  $('.listing').filter(":visible").size();
     //alert(resCount)
     $("#contResults").html(resCount + ' results');
 }
  //bedrooms filter

$("#Studio").click(function(){
 if($("#Studio").is(':checked'))
       {              
         $('.listing[bedrooms!="Studio"]').hide();
         divcount();             
       }
  if(!$("#Studio").is(':checked'))
       {              
        $('.listing[bedrooms!="Studio"]').show();
        divcount();    
       }       
   });

$("#1B").click(function(){
 if($("#1B").is(':checked'))
       {              
         $('.listing[bedrooms!="1 Bedroom"]').hide();
         divcount();         
       }
  if(!$("#1B").is(':checked'))
       {              
        $('.listing[bedrooms!="1 Bedroom"]').show();
        divcount();        
       }       
   });

$("#2B").click(function(){
 if($("#2B").is(':checked'))
       {              
         $('.listing[bedrooms!="2 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#2B").is(':checked'))
       {              
        $('.listing[bedrooms!="2 Bedroom"]').show();
        divcount();    
       }       
   });

$("#3B").click(function(){
 if($("#3B").is(':checked'))
       {              
         $('.listing[bedrooms!="3 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#3B").is(':checked'))
       {              
        $('.listing[bedrooms!="3 Bedroom"]').show();
        divcount();    
       }       
   });
$("#4B").click(function(){
 if($("#4B").is(':checked'))
       {              
         $('.listing[bedrooms!="4 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#4B").is(':checked'))
       {              
        $('.listing[bedrooms!="4 Bedroom"]').show();
        divcount();    
       }       
   });
$("#5B").click(function(){
 if($("#5B").is(':checked'))
       {              
         $('.listing[bedrooms!="5 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#5B").is(':checked'))
       {              
        $('.listing[bedrooms!="5 Bedroom"]').show();
        divcount();    
       }       
   }); 

есть идеи?

Спасибо

Answer 1

Я упростил ваш код и использовал data атрибуты для хранения количества спален.

HTML

<input data-bedrooms="1" type="checkbox">1 bedroom<br>
<input data-bedrooms="2" type="checkbox">2 bedrooms<br>
<input data-bedrooms="3" type="checkbox">3 bedrooms<br>
<ul>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="3">3 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="3">3 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
</ul>

Jquery

$('input').change(function(){
    $('input').each(function(){
        var checked = $(this).attr('checked') || false;
        var numberofrooms = $(this).data('bedrooms');
        $('li').each(function(){
            if ($(this).data('bedrooms')==numberofrooms){
                checked ? $(this).show() : $(this).hide();
            }
        });
    });
});

И это во многом. Проверьте jsfiddle .

EDIT

Я еще немного повозился и придумал:

$('input').change(function(){
    var allchecked=0;
    $('input').each(function(){
        var checked;
        if (checked = $(this).attr('checked')) {allchecked++};
        var numberofrooms = $('li[data-bedrooms='+$(this).data('bedrooms')+']');
        checked ?  numberofrooms.show('slow'): numberofrooms.hide('slow');
    });
    if(allchecked==0){$('li').show('slow');}
});

Я думаю, что это более элегантно, и теперь все списки будут отображаться, если не установлены флажки. Пример здесь .

Answer 2

Вместо того, чтобы делать то, что вы делаете, и скрывать комнаты, если они не равны чему-то, почему бы вам сначала не спрятать все, а затем показать те, которые вам интересны?Свяжите событие click с флажками в целом, а затем просто прокрутите их, показывая комнаты, соответствующие флажкам.

Попробуйте это jsFiddle

Это jQuery, который делает элементы скрытыми или видимыми:

$('input').click(function() {
    $('.listing').hide();
    $('input').each(function(index) {
        if ($(this).is(':checked')) {
            $('.listing[bedrooms="' + $(this).attr('id') + '"]').show();
        }
    });
});

Обратите внимание, что, чтобы сделать эту работу, кроме нового jQuery, я изменил ваш HTML для списков так, чтобы атрибут спальни соответствовалИдентификатор ваших флажков.Таким образом, вместо того, чтобы ваши списки комнат имели атрибут, такой как bedrooms="2 Bedroom", у них был атрибут bedrooms="2B" (студия осталась прежней).Также обратите внимание, что идентификаторы никогда не должны начинаться с цифры, и я просто сохранил их в своем примере, чтобы минимизировать изменения кода.Вы можете легко изменить их с 1B, 2B, 3B и т. Д. На B1, B2, B3 и т. Д.

Answer 3

Я не понял сути проблемы. Но вот моя попытка предоставить решение для всего, что я понимаю из вашего кода. Пожалуйста, поправьте меня, если я где-то ошибаюсь:)

рабочий пример: http://jsfiddle.net/ylokesh/YByCk/10/

Изменения: я сделал так, чтобы идентификатор DIV совпадал с идентификатором флажка. где он будет соответствовать конкретному идентификатору и показать соответствующий DIV.

Кроме того, сначала примените одно правило css для «отображения: нет» всего списка div. Может быть, вам нужно передать проверенный объект, чтобы показать результаты по умолчанию на странице, а затем сделать некоторые вещи в document.ready. Будем надеяться!

Answer 4

Первый запуск сделать функцию с параметрами:

function roomFilter (checkbox, room) {
 if(!$(checkbox).is(':checked')) {              
   $('.listing[bedrooms!="'+room+'"]').hide();
   divcount();
}

присвойте всем флажкам фильтра дополнительно один и тот же класс ... тогда вы можете вызвать функцию с ее параметрами:

$('.checkbox-filters').each(function(){
  roomFilter(??1, ??2);
  // i dont know where your "1B" or "1 Bedroom" is coming from
  // if "1B" is your checkbox value instead "??1" paramater insert $(this).val()
  // if "1 Bedroom" is the label do instead "??2" parameter $(this).closest('label').text()
});

изменить: чтобы не пересматривать ваши списки, я отредактировал мой ответ .. для вас