Jquery過濾列表通過複選框的DIV

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。

編輯

我擺弄周圍的一些更多的，以及與此想出了：

$('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');} 
}); 

我認爲這是更優雅，如果沒有複選框被選中的所有目錄現在將顯示。 Example here。

Answer 2

首次啓動使帶有參數的功能：

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

給所有過濾器複選框addionally同一類......那麼你可以調用函數與它的PARAMS：

$('.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() 
}); 

編輯：爲了不超越你的清單我編輯了我的答案..對你來說

Answer 3

我沒有得到實際問題的見解。但這裏是我嘗試提供一個解決方案，從我的代碼中知道的。請糾正我，如果我錯了地方:)

工作示例：http://jsfiddle.net/ylokesh/YByCk/10/

的變化：我所做的就是讓DIV ID相同複選框ID。它將匹配特定的ID並顯示匹配的DIV。

此外，最初應用一個CSS規則來「顯示：無」所有列表div。也許你需要通過檢查對象來顯示頁面上的默認結果，然後在document.ready上做一些事情。希望！

Answer 4

爲什麼不先把所有東西都隱藏起來，然後顯示出你感興趣的東西？而不是做你正在做的事情和隱藏的房間。將click事件作爲一個整體綁定到複選框，然後循環遍歷它們，顯示與檢查框相匹配的房間。

Try this jsFiddle

這是jQuery的，使元素隱藏或顯示：

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

注意從新的jQuery做這項工作，放在一邊，我修改你的HTML的資訊，以便臥室屬性與您的複選框的ID相匹配。因此，而不是您的房間列表具有像bedrooms="2 Bedroom"屬性，他們有屬性bedrooms="2B"（工作室保持不變）。還要注意，ID不應該以數字開頭，我只是將它們保留在我的示例中以最小化代碼更改。您可以輕鬆將它們從1B，2B，3B等更改爲B1，B2，B3等。