Javascript 如何选择具有相同类的div元素，并对单击的元素执行操作

我在这里努力寻找一个解决方案来选择具有类似类的div，以便在当前单击的元素上删除一些类

这是我的工作的例子。您将使用Twitter引导折叠功能，当用户单击另一个项目时，我试图从面板标题中删除类fa角度。这样，当用户单击其他项目时，它将更改箭头方向

另外，我想我需要一些发泄倾听器，但我不知道是哪一个，也不知道如何使用。谢谢

这是带有jquery的html结构，我已经在使用它了

     <div class="panel-group" id="accordion">
     <!-- Accordition -->
     <div class="panel panel-primary">
        <div class="panel-heading transition">
           <a data-toggle="collapse" data-parent="#accordion"
              href="#accordionOne">
              <h4 class="panel-title fa fa-angle-up">
                 <span class="month">oct</span>
                 <span>Hrvatski skup poduzetnika</span>
              </h4>
           </a>
        </div>
        <div id="accordionOne" class="panel-collapse collapse in">
           <div class="panel-body">
              <div class="main-event">
                 <a href="#">
                    <span>Main event</span> 
                    <img src="img/main_event.jpg">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                       sed do eiusmod tempor incididunt ut labore et dolore magna
                       aliqua.
                    </p>
                 </a>
              </div>
              <div class="events">
                 <span>Eventi</span>
                 <ul>
                    <li><a href="#">Skup amerikanaca podrijetlom iz Hrvatske s rodacima </a></li>
                    <li><a href="#">Branko ima nesto reci, policija zaustavlja vozace. Sta reci.</a></li>
                 </ul>
              </div>
           </div>
        </div>
     </div>

    <!-- jquery  -->

        $( ".panel-title" ).click(function() {
      $( this ).toggleClass( "fa-angle-up" );
    });

    $( ".panel-title.fa.fa-angle-up" ).click(function() {
      $( this ).toggleClass( "fa-angle-down" );
    });

---

由于以下错误，您的页面无法工作：

Uncaught SyntaxError: Unexpected token < 403.php:2
Uncaught Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:11
Uncaught ReferenceError: $ is not defined 

---

通常，您会以这样的方式包装可折叠组：“显示”和“隐藏”事件甚至会影响toggle元素

对你来说，我想你可以

$('.fa-angle-up').click(function() {
  $(this).removeClass('fa-angle-up');
});

$('.fa-angle-down').click(function() {
  $('.panel-title').removeClass('fa-angle-up');
  $(this).addClass('fa-angle-up');
});

但是，除非将.panel标题元素设置为管理折叠行为的元素，否则这可能不起作用。目前这是由他们的父母完成的

编辑：应该仍然可以使用隐藏和显示的事件

---

嗯，你根本就没有删除这些类。。在某个点上，同一元素上的fa角向下，fa角向上

根据jQuery文档，唯一适合您的签名是：

$( "#foo" ).toggleClass( className, addOrRemove );

这相当于：

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

我喜欢老式的方式：

$(".panel-title").click(function() 
{
   if ($(this).hasClass("fa-angle-up"))
   {
      $(this).removeClass("fa-angle-up").addClass("fa-angle-down");
   }
   else
   {
       $(this).removeClass("fa-angle-down").addClass("fa-angle-up");
   }
});

---

请根据您的解释编写html结构好吗？没关系，应该仍然可以使用隐藏和显示的事件，您只需继续，直到找到父.panel，然后获得兄弟.panel标题元素的句柄。请检查，但删除链接站点上当前的jQuery代码。最后有一个代码片段导致了错误。我已经尝试过了，但不幸的是，即使我删除了那几行分散注意力的jquery代码，它也不起作用。我相信您的代码会起作用，但需要稍加调整。我试图解决它，并将其调整到我的代码片段，但我无法做到这一点。你能再看一眼吗。

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

$(".panel-title").click(function() 
{
   if ($(this).hasClass("fa-angle-up"))
   {
      $(this).removeClass("fa-angle-up").addClass("fa-angle-down");
   }
   else
   {
       $(this).removeClass("fa-angle-down").addClass("fa-angle-up");
   }
});