jQuery隱藏與選定類別不匹配的div

Question

我試圖使用jQuery來篩選一些產品搜索結果。 有各種類型的過濾器可以用來挖掘結果（顏色，類型，大小等），我想通過隱藏那些沒有結果的「沒有結果」有任何過濾器參與的內容。

我想我的問題措辭的另一種方式是，我試圖驗證什麼過濾器應允許用戶激活它們之前應該存在。

例如，在示例代碼中，如果選擇了#brnd_B且沒有包含.prdbx.brnd_B.ptype_C的產品，則應禁用#ptype_C，以便用戶無法選擇它。

一旦使用任何過濾器，應禁用#col_red選項，因爲它不存在於產品列表中。出於同樣的原因，#cat_C應該被禁用。

然後，相應的.prdbx框顯然應該在過濾後顯示。

Sample Code: 

<h1>Brands</h1> 
<input type="radio" class="bFilter filterSwitch" name="bFilter" id="brnd_A"> 
<input type="radio" class="bFilter filterSwitch" name="bFilter" id="brnd_B"> 
<input type="radio" class="bFilter filterSwitch" name="bFilter" id="brnd_C"> 

<h1>Types</h1> 
<input type="radio" class="pTypeFilter filterSwitch" name="pTypeFilter" id="ptype_A"> 
<input type="radio" class="pTypeFilter filterSwitch" name="pTypeFilter" id="ptype_B"> 
<input type="radio" class="pTypeFilter filterSwitch" name="pTypeFilter" id="ptype_C"> 

<h1>Options</h1> 
<input type="radio" class="bTypeFilter filterSwitch" name="bTypeFilter" id="cat_A"> 
<input type="radio" class="bTypeFilter filterSwitch" name="bTypeFilter" id="cat_B"> 
<input type="radio" class="bTypeFilter filterSwitch" name="bTypeFilter" id="cat_C"> 

<h1>Colors</h1> 
<input type="radio" class="cTypeFilter filterSwitch" name="cTypeFilter" id="col_Black"> 
<input type="radio" class="cTypeFilter filterSwitch" name="cTypeFilter" id="col_Blue"> 
<input type="radio" class="cTypeFilter filterSwitch" name="cTypeFilter" id="col_Red"> 

<h1>Products</h1> 
<div class="prdbx show brnd_A cat_B ptype_C col_Black yld_Standard mod_PIXMAiP4820 mod_PIXMAiX6520 mod_PIXMAiX6550">Data 1</div> 
<div class="prdbx show brnd_B cat_A ptype_A col_Blue yld_Standard mod_PIXMAiX6520">Data 2</div> 
<div class="prdbx show brnd_A cat_A ptype_B col_Black yld_Standard mod_PIXMAiP4820">Data 3</div> 

這是我到目前爲止的jQuery;它在大多數情況下都會顯示相應的.prdbx，但它在顯示它們之前從不「驗證單選按鈕應該被允許」，這正是我所苦苦掙扎的。

如果我使sep變量爲逗號，我也會得到混合結果。

任何幫助將不勝感激。

$('.filterSwitch').click(function(e) { 
     $('.brandbx').hide(); 
     $('.prdbx').hide(); // hide all products 
     // set up variables 
     thisFilter1 = ""; 
     var sep = "" 
     // hide inapplicable filters 

     // figure out what we're displaying 
     $('input[name=bFilter]:checked').each(function(e) { 
      thisFilter1 = thisFilter1 + sep + '.'+this.id; 
     }); 
     $('input[name=bTypeFilter]:checked').each(function(e) { 
      thisFilter1 = thisFilter1 + sep + '.'+this.id; 
     }); 
     $('input[name=pTypeFilter]:checked').each(function(e) { 
      thisFilter1 = thisFilter1 + sep + '.'+this.id; 
     }); 
     $('.cTypeFilter').each(function(e) { 
      thisFilter1 = thisFilter1 + sep + '.'+this.id; 
     }); 

     $(thisFilter1).show(); 
     verifyEmpty(); 
    }); 

    function verifyEmpty(){ 
     var totalFilter = 0; 
     $('input[name=bFilter]:checked').each(function(e) { 
      totalFilter++; 
     }); 
     $('.cTypeFilter:checked').each(function(e) { 
      totalFilter++; 
     }); 
     $('.pTypeFilter:checked').each(function(e) { 
      totalFilter++; 
     }); 
     $('.bTypeFilter:checked').each(function(e) { 
      totalFilter++; 
     }); 
     if(totalFilter == 0){ 
      $('.prdbx').show(); // show all products  
      $('.brandbx').show(); // show models 
     } 
    } 

Answer 1

你可以試試下面的代碼

$('.filterSwitch').each(function(){ 
if($("."+this.id).length<=0) 
    this.disabled=true; 
}); 

這是考慮到即使一個單選按鈕，然後和其他人都是空白的它應該過濾值（如您的代碼工作現在）。 如果不是這種情況&您希望在過濾之前選擇所有單選按鈕，那麼代碼將會不同。