Question

我有一个容器，其中包含相同格式的div。每个div有3个属性，我在其中应用过滤器选项。

div看起来像这样

<div data-A="1" data-B="x" data-C="4"＆GT;

3个选项中的每一个，A B和C都有每个选项的值。例如，A的值为1 2 3，B的值为x y z，C的值为4 5 6.它们可用作此类的复选框

因此，如果我检查了一个值为1的A选项，那么将显示数据为A = 1的div，所以如果我选中了值为1的A选项，则选项为value = x，C选项为value = x z，将显示满足这3个值的div。

但是，我如何才能真正满足A，B和C之一根本没有被选为过滤器的情况，即选中值为= x的B选项和值为4的C选项，所以我应该用数据显示所有div-B ='x'和data-C ='4'。

现在，我正在为此使用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创建一个单独的函数，也可以将其分解以避免冗余。

过滤复选框选择

1 个答案: