筛选复选框选择

Question

我有一个包含相同格式的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(); 
      } 
     } 
    } 

Answer 1

的方式我会去这件事，是听整体变更并相应地切换显示到已更改的最后一个复选框。

沿着东西线：

/*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或因式分解有点以避免冗余。