CODEWITHSUNDEEP
javascriptjqueryhtml
Zoinks10
Zoinks10

Reputation: 629

Why is my jQuery not allowing me to toggle classes?

I have a series of custom Chevron elements that I'm going to use as buttons on my site. I've managed to set up the jQuery so that the clicked chevron/button is given a class="selected" which I then use to add custom styles. If I click any other chevron then the selected class is removed from the first chevron and added to the last chevron that was clicked. All of this works fine. I have another link that can be clicked to remove the class from all of the chevrons. What I'm trying to do now is to enable the .toggle(Class) function on jQuery so that I can also remove the class="selected" by clicking the same element twice.

My jQuery code:

$(function () {
$('#chevrons > ul > li > a').click( function(){
    $('#chevrons .selected').removeClass('selected');
    $('#show-all').removeAttr("style");
    $(this).toggleClass('selected');
   });
});

$(function () {
    $('#show-all').click( function(){
      $('#chevrons .selected').removeClass('selected');
      $(this).css('color', '#FECF2A');
    });
});

I've tried the toggle without the rows:

$('#chevrons .selected').removeClass('selected');
    $('#show-all').removeAttr("style");

And it works fine. I assumed (perhaps incorrectly) that the jQuery would execute line-by-line and therefore the last thing to execute. But perhaps the first line above is removing the "selected" attribute from all of the chevrons and then the last line will only ever add the class.

What am I doing wrong here?

Upvotes: 1

Views: 105

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93631

JSFiddle: http://jsfiddle.net/oqs4nycj/1/

Just exclude the clicked item from the class removal using not():

    $('#chevrons .selected').not(this).removeClass('selected');

Applying this fix to your own JSFiddle (looks very cool by the way) you get this:

http://jsfiddle.net/qsnkqhp8/1/

Upvotes: 3

max
max

Reputation: 102443

JSFiddle: http://jsfiddle.net/gopj0hyj/

Edit. I did not read the question carefully enough. Sorry. I have edited the code to deselect by clicking twice.

jQuery(function ($) {

    // Variables are your friends - the $ preface tells us its a jQuery object
    var $chevrons = $("#chevrons");
    var $buttons = $chevrons.find('a');
    var $show_all = $('#show_all');

    // We bind a handler to the parent $chevrons element
    // this is good for performance 
    // It will also bind the handler to elements dynamically added with ajax.
    $chevrons.on('click', 'a', function(e){
        var $old_selection = $buttons.filter('.selected');
        var $clicked = $(this);

        // Ensure that no button is selected
        $buttons.removeClass('selected');

        // Checks if button already was selected.
        if ($clicked.get(0) !== $old_selection.get(0)) {
            // select the clicked button
            $clicked.addClass('selected');
        }

        $show_all.removeClass('active');
        // prevents the browser from scrolling to top.
        e.preventDefault();
    });

    $show_all.on('click', function(){
        $buttons.removeClass('selected');
        $(this).addClass('active');
    });
});

Upvotes: 0

Related Questions