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>

我有三个＆＃34;数据 - ＆＃34;附加到每个列表项的属性，我想使用这些属性来检测项目是否显示，但我不能想到一个简单的方法。

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

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

我理解如何以这种方式删除和显示元素，但对我来说似乎有些混乱。

那么使用Jquery实现这一目标的最佳方法是什么？我想我可能会过度设计整个事情。

感谢您的时间。

Answer 1

我认为您可能正在寻找attribute selector。

例如，当有人想要看到＆＃34; data-auto＆＃34;项目，您可以执行以下操作：

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

根据项目可以包含多个值的值删除项目

1 个答案: