javascript - 根据值删除项目(其中一个项目可以有多个值)

Question

我有一个系统，它列出了数据库中的许多项目，这些项目可以具有可以附加到它的三种不同状态:手动、自动和 VIP。此列表中的单个项目可以是其中一种状态，有时可以同时是两种或全部三种状态。

系统还具有三个过滤器:手动、自动和 VIP。

我正在尝试构建一个系统，以便当过滤器的状态发生变化(选中/取消选中框)时，系统将隐藏或显示此列表中的项目。

所以我在当前的实现中正在努力解决这个概念。

这是一些代码:

<ul class="content-list" id="update-list">
<li class="list-item" 
    data-auto="1" 
    data-manual="1" 
    data-vip="1">

    <div class="list-avatar">
        <p class="multi-circle">A/M</p>
    </div>

    <div class="list-details">

        <h3 class="list-item-heading">Update #1  </h3><small class="list-timestamp">11/11/13</small>
        <div class="list-item-text">
        </div>
    </div>

</li>

<li class="list-item" 
    data-auto="1" 
    data-manual="1" 
    data-vip="0">

    <div class="list-avatar">
        <p class="multi-circle">A/M</p> 
    </div>

    <div class="list-details">

        <h3 class="list-item-heading">Update #2  </h3><small class="list-timestamp">11/11/13</small>
        <div class="list-item-text">
        </div>
    </div>

</li>

<li class="list-item" 
    data-auto="0" 
    data-manual="1" 
    data-vip="0">

    <div class="list-avatar">
        <p class="manual-circle">M</p>
    </div>

    <div class="list-details">

        <h3 class="list-item-heading">Update #3  </h3><small class="list-timestamp">11/11/13</small>
        <div class="list-item-text">
        </div>
    </div>

</li>

我在每个列表项上附加了三个“data-”属性，我想使用这些属性来检测该项目是否显示，但我想不出一种简单的方法来执行此操作。

我对此事的另一个想法是为每个项目添加一个类，例如说明它是手动、自动还是 VIP

<li class="list-item manual auto vip">

我知道如何以这种方式删除和显示元素，但对我来说似乎有点困惑。

那么使用 Jquery 实现此目的的最佳方法是什么？我想我可能对整个事情进行了过度设计。

感谢您的宝贵时间。

Answer 1

我想您可能正在寻找 attribute selector .

例如，当有人想要查看“data-auto”项目时，您可以执行以下操作:

$("li[data-auto='1']").show();