CODEWITHSUNDEEP
javascriptjquery
morne
morne

Reputation: 4189

remove class and add class on single element

I have table type structure made of DIV elements.
I have made a expand/collapse type list.

I have this icon that i want to change if it expands and reset it back if I collapse the list. The two icons are linked to 2 classes.

$('.rowHead_but i', this ).removeClass('icon-double-angle-down');

and 

$('.rowHead_but i', this ).addClass('icon-double-angle-up');

Okay it removes the class successfully and adds the new class, but it does it for all rows.

I only want this row to be affected.

What Im I doing wrong?

<div class="notificationDetail">
<div class="header">
    <div class="Collapse"> 
        <div class="rowHead1"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
  </div>
 <div class="header">
    <div class="Collapse"> 
        <div class="rowHead2"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
  </div>
 <div class="header">
    <div class="Collapse"> 
        <div class="rowHead3"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
</div>
</div>

JQuery code

    $('.notificationDetail').on('click','.header', function(e){
        e.stopPropagation();



        $(function() {

            var classTst_down = $('.rowHead_but i', this ).hasClass( "icon-double-angle-down" );
            var classTst_up = $('.rowHead_but i', this ).hasClass( "icon-double-angle-up" );

            if ( classTst_down ) {
                console.log('remove down');
                $(this ).removeClass('icon-double-angle-down');
                console.log('removed');
                $(this ).addClass('icon-double-angle-up');
                console.log('added');
            }
            if ( classTst_up ){
                console.log('remove up');
                $(this ).addClass('icon-double-angle-down');
                $(this ).removeClass('icon-double-angle-up');
            }
        });

   });

Upvotes: 1

Views: 844

Answers (2)

johnnyd23
johnnyd23

Reputation: 1705

Seems overly complicated. Why do you need two classes? - try something like: 

$('.notificationDetail .header').click(function() {
    var $el = $(this).find('.rowHead_but i');
    $el.toggleClass('icon-double-angle-down');
});

Upvotes: 1

dfsq
dfsq

Reputation: 193261

From what you understand is that you don't actually want to bind event handler to .header container, but rather to individual .Collapse items. if so you can then dramatically simplify your code if you use toggleClass:

$('.notificationDetail').on('click', '.Collapse', function (e) {
    e.stopPropagation();
    $('.rowHead_but i', this).toggleClass('icon-double-angle-down icon-double-angle-up');
});

http://jsfiddle.net/7h1gn4cx/

Upvotes: 3

Related Questions