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

【问题标题】：How to select certain elements in a group of elements with the same class tag using jquery如何使用jquery在具有相同类标签的一组元素中选择某些元素
【发布时间】：2021-07-11 03:14:57
【问题描述】：

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

顶部的孩子或上面有较亮绿色的孩子有一个active_link 类，它基本上告诉你你在仪表板的这一部分。所以我的想法是，我希望将 active link 类添加到我点击的某个元素中，而其他未点击的元素没有（意思是如果元素已经有 active_link 但它是不是我点击的那个，那么这个类将被删除，但是如果它没有active_link 类并且它是我点击的那个，它将被添加到那个特定的元素中）。但是，我有一个问题。我尝试运行此代码：

  $(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>

【问题讨论】：

标签： javascript html jquery user-interface

【解决方案1】：

您可以简单地使用$(".sidebar_link").not($(this)).removeClass("active_link") 从其他侧边栏中删除未被用户单击的类。

演示代码：

$(".sidebar_link").click(function() {
  $(".sidebar_link").not($(this)).removeClass("active_link")
  $(this).toggleClass('active_link');
});

.active_link {
  background-color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：