Question

我正在编写我的第一个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-*'，则所有系统都将变为黑色，并且所选系统将保持红色。

我想到了

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

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

但我认为我正在思考它。是否有一种简单的方法来迭代每种数据类型？

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

0 个答案: