2013-04-29 208 views
1

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

我假设考虑到它们是复选框,您可以同时检查A,B和C的多个值吗?在这种情况下,你会显示每个匹配的div?什么是$(A)'/'$(B)'/'$(C)'?他们是否选中了复选框? – 2013-04-29 08:35:51

+0

对于缺乏说明感到抱歉。是的,我可以有多个值的A,B和C检查$(A)/ $(B)/ $(C)是选中的复选框 – edelweiss 2013-04-29 08:40:27

回答

0

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

沿着东西线:

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