0

我正在编写我的第一个 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>

所以我想要的是当有人单击过滤器名称以更改颜色时，但您可以同时运行多个过滤器。所以有人可以看到猴子正在处理的所有系统。

到目前为止，我已经做到了

$('.filters a').click(function(){
  $('.filters a').css('color','black');
  $(this).css('color','red');
});

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

从这里我深陷其中。

因此，如果单击链接data-filter='dev-*'，则所有开发人员都会变黑，而单击的开发人员会变红。如果data-filter='system-*'单击 a，则所有系统都变黑，并且所选系统与所选开发人员保持红色。

我想到了

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

拆分数据过滤器信息，以便我知道它所属的组。

但我想我想多了。有没有一种简单的方法来迭代每种数据类型？

4

0 回答 0