如何选择具有相同类的div元素并对单击的元素做些什么

Question

I am here struggling to find a solution for selecting div with similar class in order to remove some class on current (clicked) element.

Here is example of my work. You will se Twitter Bootstrap collapse feature where I am trying to remove class fa-angle-up from panel-title when user click on another item. This way it will change arrow direction when user click on another item.

http://quadrifoglio-test.esy.es/sample/

ps. I believe I need some vent listener but I don?t know which one and how to use it. Thanks!

here is html structure with jquery which I am using already.

     <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" );
    });

Answer 1

Your page does not work because of the following errors:

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

You need to include the necessary scripts (like jQuery).

---

Update

You are binding the caret icon to click listeners on the panel which is unreliable. Instead, you want to bind to the bootstrap event like so:

function toggleCaret(e) {
    var $target = $(e.currentTarget),
        $div = $($target.find('.collapse')),
        $theLink = $target.find('a[data-toggle="collapse"]').parent(),
        $links = $('a[data-toggle="collapse"]').parent();

    function doUp() {
        $theLink.addClass('fa-angle-up');
        $theLink.removeClass('fa-angle-down');
    }

    function doDown() {
        $links.removeClass('fa-angle-up');
        $links.addClass('fa-angle-down');
    }

    doDown();
    doUp();
}

$('.panel').on('shown.bs.collapse', function (e) {
    toggleCaret(e);
});

FIDDLE

Answer 2

Usually, you would wrap your collapsible groups in such a way that the 'shown' and 'hidden' events would affect even the toggle element.

In your case, I guess you could do

$('.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');
});

However, this will probably not work unless you make the .panel-title elements be the ones that manage the collapse behavior. Currently this is done by their parent.

Edit: It should still be possible to use hidden and shown events.

$(document).on('hidden', '.collapse', function () {
   var panel=$(this).closest('.panel');
   var paneltitle=$('.panel-title',panel);
   paneltitle.removeClass('fa-angle-up');
});

$(document).on('shown', '.collapse', function () {
   var panel=$(this).closest('.panel');
   var paneltitle=$('.panel-title',panel);
   paneltitle.addClass('fa-angle-up');
});

Answer 3

well you are not removing the classes at all.. at some point you have both fa-angle-down and fa-angle-up on the same element.

according to jQuery docs the only signature that might suit you case is:

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

which is equivalent to:

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

i preffer the old-fashion way:

$(".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");
   }
});