篩選複選框選擇

我有一個包含相同格式的div的容器。每個div都有3個屬性，我正在使用過濾器選項。篩選複選框選擇

在div看起來像這樣

<div data-A="1" data-B="x" data-C="4">

的每3個選項，A B和C具有值每個選項。例如A具有值1 2 3，B具有值XYZ，C具有值4 5 6它們可作爲這樣

所以，如果我檢查的A選項與值複選框= 1，則如果我檢查了值爲1的A選項，value = x的B選項和值爲z的C選項，則會顯示滿足這3個值的div。

但是，如何真正迎合其中A，B和C之一未被選作過濾器的情況，即檢查B選項的值= x和C選項的值= 4，所以我應顯示數據-B ='x'和數據-C ='4'的所有div。

現在，我正在使用3個嵌套for循環，這不會迎合沒有選擇一個選項的情況。有什麼辦法可以有效地做到這一點？

我現在jQuery是如下

for(var p = 0;p < $(A).length ;p++) 
    { 
     for(var q = 0;q < $(B).length ;q++) 
     { 
      for(var r = 0;r < $(C).length ;r++) 
      { 
       $('div[data-A = "'+ A[p] + '"][data-B="'+ B[q] +'"][data-C="'+ C[r] +'"]').show(); 
      } 
     } 
    }

來源

2013-04-29 edelweiss

我假設考慮到它們是複選框，您可以同時檢查A，B和C的多個值嗎？在這種情況下，你會顯示每個匹配的div？什麼是$（A）'/'$（B）'/'$（C）'？他們是否選中了複選框？ – 2013-04-29 08:35:51

對於缺乏說明感到抱歉。是的，我可以有多個值的A，B和C檢查$（A）/ $（B）/ $（C）是選中的複選框 – edelweiss 2013-04-29 08:40:27

的方式我會去這件事，是聽整體變更並相應地切換顯示到已更改的最後一個複選框。

沿着東西線：

/*Put whatever is needed to select your checkboxes of the A family here*/ 
$("input[type='checkbox'].A").on("change", function(){ 
    if (this.checked) { 
     $("div[data-A='" + this.value + "']").each(function(index, elt) { 
      /*This is pseudo code, you'll need to put here a way to select the correct checkbox and to check if it's checked*/ 
      if ($(elt).data("B").isChecked && $(elt).data("C").isChecked) { 
       $(elt).show(); 
      } else { 
       $(elt).hide(); 
      } 
     } 
    } else { 
     $("div[data-A='" + this.value + "']").hide() 
    } 
});

您可以做一個單獨的函數，每data-X或因式分解有點以避免冗餘。

來源

2013-04-29 08:52:02

篩選複選框選擇

回答

相關問題