javascript - 如何仅向多个相同元素之一添加类

Question

我在 DOM 中有三个相同的元素。我的意思正是一条摆动的线 <span class="caret"></span>

<ul>
  <li class="nav-item-1">
   <a href="#">ITEM 1</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-2">
   <a href="#">ITEM 2</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-3">
   <a href="#">ITEM 3</a>  
   <span class="caret"></span>
  </li>  
</ul>

场景:我点击第一个<span class="caret"></span>获得类(class)"open" ，剩下的仍然只有"caret" 。我点击第二个<span class="caret"></span>获得类(class)"open" ，在第一个类 "open"已移除。是否可以？我写了这样的东西:

$(".caret").click(function () {
  $(this).data('clicked', true);
  if ($('.caret').data('clicked')) {
    $(".caret").toggleClass('opened');
  }
});

它可以工作，但是所有 "caret"类(class)获取toggleClass('opened')我只是想让它得到你点击的那个......

Answer 1

您使用 $(this) 的做法是正确的，但随后又恢复使用 $('.caret')。这样做:

$(".caret").click(function () {
     $(this).toggleClass('opened');
});

<小时/>

询问者请求关闭所有其他 .caret 类:

$(".caret").click(function () {
    $(".caret").removeClass('opened');
    $(this).addClass('opened');
});