Javascript 如何使用jquery在一组具有相同类标记的元素中选择某些元素

我正在尝试仪表板的这个侧边栏，它看起来像这样

顶部的子级或其上绿色较亮的子级有一个class

active\u链接

，它基本上告诉您位于仪表板的这一部分。因此，我希望类

活动链接

被添加到我单击过的特定元素中，而其余未单击的元素则没有（这意味着如果元素已经有了

活动链接

，但它不是我单击过的链接，那么该类将被删除，但是如果它没有

活动链接

类，并且是我单击的链接，它将被添加到该特定元素中）。但是，我有一个问题。我尝试运行此代码：

  $(function(){
  $(".sidebar_link").click(function(){
      $(".sidebar_link").each(function(index){
          if($(this).data('clicked', true)){
            if($(this).hasClass('active_link') == false){
              $(this).addClass('active_link');
            }
          }else{
            if($(this).hasClass('active_link')){
              $(this).removeClass('active_link');
            }
          }
      });
  });

})

事情就是这样：

我能说的只是一场灾难，有什么建议吗？提前谢谢你！这是HTML

<div class="sidebar_menu">
  <div class="sidebar_link active_link">
    <i class="fa fa-home"></i>
    <a href="#">Dashboard</a>
  </div>
  <h2>MANAGE</h2>

  <div class="sidebar_link">
    <i class="fa fa-building-o"></i>
    <a href="#">See Admin Notif</a>
  </div>
  <div class="sidebar_link">
    <i class="fa fa-wrench"></i>
    <a href="#">Update Profile</a>
  </div>
  <div class="sidebar_link">
    <i class="fa fa-archive"></i>
    <a href="#">Donate</a>
  </div>
  <div class="sidebar_link">
    <i class="fa fa-handshake-o"></i>
    <a href="#">Connect</a>
  </div>

  <div class="sidebar_logout">
    <i class="fa fa-power-off"></i>
    <a href="#">Log out</a>
  </div>
</div>

管理

您可以简单地使用

$（“.sidebar\u link”）.not（$（this））.removeClass（“active\u link”）

从用户未单击的其他侧边栏中删除类

演示代码：

$（“.sidebar\u link”）。单击（函数（）{
$（“.sidebar\u link”）。不是（$（this））.removeClass（“active\u link”）
$（this.toggleClass（'active_link'）；
})；

。活动链接{
背景颜色：绿色
}

管理

它工作得很好！谢谢！