jquery - 使用 jQuery 从无序列表中除当前 li 之外的所有 li 添加或删除类

Question

这是我的 HTML 结构

<ul class="checklist">
    <li class="opaque"><a href="">Link</a></li>
    <li class="transparent"><a href="">Link</a></li>
    <li class="transparent"><a href="">Link</a></li>
</ul>

当我单击其中一个透明 li 内的 anchor 时，我想将其设置为不透明，并将 ul 内的所有其他 li 设置为透明。

关于如何有效地做到这一点有什么想法吗？

Answer 1

你可以这样做:

$('document').ready( function(){
  $('ul.checklist').find('a').click( function(){
    $(this)
      .parent().addClass('opaque').removeClass('transparent')
      .siblings().addClass('transparent').removeClass('opaque');
  });
});

但是，如果您确实只表示两种永远不会同时出现的状态，那么为什么不只使用一个类，没有该类就代表第二种状态呢？然后你会得到这个:

$('document').ready( function(){
  $('ul.checklist').find('a').click( function(){
    $(this)
      .parent().addClass('opaque')
      .siblings().removeClass('opaque');
  });
});