jQuery基于数据标签HTML5编辑多个元素

我正在编写我的第一个jquery代码片段，我正在尝试构建一个很酷的过滤系统，其中有两个过滤器列表，一个用于开发人员，另一个用于系统

<div class="filters">
  <ul>
    <li><a data-filter="dev-monkey" href="#">monkey one</a></li>
    <li><a data-filter="dev-monkey2" href="#">monkey two</a></li>
    <li><a data-filter="dev-monkey3" href="#">monkey three</a></li>
    ...
  </ul>
</div>

<div class="filters">
  <ul>
    <li><a data-filter="system-zoo" href="#">the zoo</a></li>
    <li><a data-filter="system-jungle" href="#">the jungle</a></li>
    <li><a data-filter="system-ocean" href="#">the ocean</a></li>
    ...
  </ul>
</div>

因此，这将突出显示您刚才单击的过滤器红色，然后将所有其他过滤器变为黑色

从这里开始，我深深地投入其中

因此，如果单击链接

datafilter='dev-*'

，所有开发人员都会变黑，而单击的开发人员会变红。 如果单击了

data filter='system-*'

，则所有系统都变黑，所选系统与所选开发保持红色

我想到

 var filter = $(this).attr('data-filter');
 var group = filter.split('-')[0];
 var tag = filter.split('-')[1];

拆分数据筛选器信息，以便我知道它所属的组

---

但我觉得我想得太多了。是否有一种简单的方法来迭代每种数据类型？

您可以使用

$（this）.data（）

来捕获

数据-…

属性。

var tag=$（this）.data（'filter'）.split（'-'）[1]

？我尝试调用

.data（）

并返回对象。是的。因此，您需要向参数传递所需的数据，例如

$（this）.data（'filter'）

返回您的

数据过滤器

值。

 var filter = $(this).attr('data-filter');
 var group = filter.split('-')[0];
 var tag = filter.split('-')[1];