Javascript 使用带有数据属性的jquery进行多重筛选

我需要使用

数据

属性使用多个过滤器。它是组合工作，但不是单独工作。这是我的密码：

<ul>
    <li>
        <div class="sts">
            <h1>filter 1</h1>
            </h1>
            <div class="checkbox">
                <label>
                    <input data-id="1" class="st" type="checkbox" />
                    1
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="2" class="st" type="checkbox" />
                    2
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="3" class="st" type="checkbox" />
                    3
                </label>
            </div>
        </div>
    </li>
    <li>
        <h1>filter 2</h1>
        <div class="ats">
            <div class="checkbox">
                <label>
                    <input data-id="foo" class="at" type="checkbox" />
                    foo
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="boo" class="at" type="checkbox" />
                    boo
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="bar" class="at" type="checkbox" />
                    bar
                </label>
            </div>
        </div>
    </li>
    <li>
        <h1>filter 3</h1>
        <div class="dpts">
            <div class="checkbox">
                <label>
                    <input data-id="a" class="dpt" type="checkbox" />
                    a
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="b" class="dpt" type="checkbox" />
                    b
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="c" class="dpt" type="checkbox" />
                    c
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="d" class="dpt" type="checkbox" />
                    d
                </label>
            </div>
        </div>
    </li>
</ul>

<ul class="list">
    <li data-a="foo" data-st="1" data-dpt="a">asdw</li>
    <li data-a="boo" data-st="2" data-dpt="c">qwedf</li>
    <li data-a="boo" data-st="1" data-dpt="a">qwedf</li>
    <li data-a="bar" data-st="3" data-dpt="b">tazxsw</li>
    <li data-a="bar" data-st="1" data-dpt="b">zxcvb</li>
    <li data-a="foo" data-st="1" data-dpt="b">poiuy</li>
    <li data-a="boo" data-st="2" data-dpt="d">lkjhg</li>
    <li data-a="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>

这是一个

如果我选中过滤器1和过滤器2和过滤器3中的任何选项，则该选项将工作，但当我单击过滤器1或过滤器2中的任何选项时，该选项将不工作

您的逻辑将比需要的复杂得多。你应该注意使用干式原理，因为你可以使这更简单

首先，在所有复选框上放置一个公共类（我在示例中使用了

.stat

）。然后使用数据属性来表示统计数据的类型。从那里，您可以循环检查每个选中的统计数据，并使用

filter（）

根据

data stat

和

data id

匹配相关的

li

。大概是这样的：

$（'.stat'）。在（'click'，function（）上{
var$stats=$（'.stat:checked'）；
变量$items=$（'.list li'）；
$items.show（）；
如果（$stats.length==0）
返回；
$stats.each（函数（）{
var$stat=$（此）；
$items.filter（函数（）{
返回$（this.data（$stat.data（'type'））！=$stat.data（'id'）；
}).hide（）；
})
});



过滤器1
1.
2.
3.


过滤器2
福
喝倒采
酒吧


过滤器3
A.
B
C
D



asdw
qwedf
qwedf
tazxsw
zxcvb
pouy
lkjhg
lkjhg
“但是一个过滤器不起作用。”您引用的是
javascript
的哪一部分？@guest271314请检查小提琴谢谢，但当我选中“全部”复选框时，它不显示任何内容，因为它在每个选项上执行逻辑“和”。我更新了答案，为您添加了“或”选项我需要显示所有选项选中“全部”复选框后，如何更改它实际工作，但这不是我所期望的。。如果我从同一个过滤器中选择任意2个复选框，它应作为逻辑“或”，如果我从一个过滤器的一个复选框中选择，从另一个过滤器的另一个复选框中选择，它应作为“和”