JQuery Newbie Refining toggleClass?

Question

I have this snippet (below) of jQuery that adds a separate CSS Selector for each of my elements with a class of '.filter-name' This works and i am happy with what it does.

jQuery('.filter-name').each(function(i){
                jQuery(this).addClass('title'+(i+1));
            });

My problem is that I have to fire a 'clicked' class every time each of the elements is clicked, which is done by the code below, it works but it doesn't look very elegant in the code. is there any way of refining this?

jQuery('.title1').click(function(){
            jQuery('.title1').toggleClass('clicked');
        });
        jQuery('.title2').click(function(){
            jQuery('.title2').toggleClass('clicked');
        });
        jQuery('.title3').click(function(){
            jQuery('.title3').toggleClass('clicked');
        });
        jQuery('.title4').click(function(){
            jQuery('.title4').toggleClass('clicked');
        });
        jQuery('.title5').click(function(){
            jQuery('.title5').toggleClass('clicked');
        });
        jQuery('.title6').click(function(){
            jQuery('.title6').toggleClass('clicked');
        });

I have tried :

jQuery('.title1, .title2, .title3, .title4, .title5, .title6').click(function(){
                jQuery('.title1, .title2, .title3, .title4, .title5, .title6').toggleClass('clicked');
            });

but this just fires all of them at the same time, which is not what I want the jQuery to do.

p.s using jQuery in noConflict(); hence the jQuery selector.

I'd suggest to use the same class for all elements, and use perhaps an id thats unique to each title element. — techfoobar, Sep 27 '13 at 13:11
FYI: In the future, this can be asked on http://codereview.stackexchange.com/. — ajp15243, Sep 27 '13 at 13:11
@techfoobar He already has a common class `.filter-name`. Just that he isn't using it. — Selvakumar Arumugam, Sep 27 '13 at 13:15

score 4 · Accepted Answer · answered Sep 27 '13 at 13:11

4

How about adding the click handler to .filter-name,

jQuery('.filter-name').click(function () {
   //using this ensure that is toggling the correct element
   jQuery(this).toggleClass('clicked'); 
});

answered Sep 27 '13 at 13:11

Selvakumar Arumugam

79,297
15
120
134

score 1 · Answer 2 · answered Sep 27 '13 at 13:12

Your solution would work like this,

jQuery('.title1, .title2, .title3, .title4, .title5, .title6').click(function(){
            jQuery(this).toggleClass('clicked');
});

I would suggest you to give class names for all titles as .title then you could reduce the code to,

jQuery('.title').click(function(){
            jQuery(this).toggleClass('clicked');
});

score 0 · Answer 3 · answered Sep 27 '13 at 13:11

0

Delegate your event handling:

jQuery(document.body).on('click', '.filter-name', function() {
    jQuery(this).toggleClass('clicked');
});

You're already relying on .filter-name to generate all the .title# classes, so just use it to attach your event handler.

You should replace document.body with the lowest common ancestor for all your .filter-name elements.

answered Sep 27 '13 at 13:11

André Dion

21,269
7
56
60

Why event delegation? I am not able to find if he had mentioned about adding it dynamically in OP. – Selvakumar Arumugam Sep 27 '13 at 13:13
is there a need to attach the event to the body in this case? – Huangism Sep 27 '13 at 13:13
@Vega One event handler vs *N* event handlers. – André Dion Sep 27 '13 at 13:14
@Huangism No, but I don't know what the lowest common ancestor would be for OP, so I made a safe assumption and added some instruction to my answer. – André Dion Sep 27 '13 at 13:15
@AndréDion Don't think it is wise to add it like this because of the bubbling and the scenario of event handler getting triggered for all clicks in body and comparing it with the selector to find a match. – Selvakumar Arumugam Sep 27 '13 at 13:17
@Vega Event delegation incurs less overhead when binding while direct binding incurs less overhead when events are triggered, so there's overhead no matter what approach you take ([source](http://stackoverflow.com/questions/8827430/event-delegation-vs-direct-binding-when-adding-complex-elements-to-a-page)). My preference is to delegate when a single handler is being reused on multiple elements as it's easier to manage, especially if/when modifying DOM elements with directly bound handlers. – André Dion Sep 27 '13 at 13:33
@AndréDion The over head on direct binding is one time and that is at onload. I agree and event delegation is less overhead when using for lot of elements such as binding a handler to each row in a table (Still It is better to delegate to the `table` and not `body`). The overhead in event binding is every time in scope and especially when delegating on body, it happens on every click in the webpage which is actually huge when compare to one time direct binding that happens onload. – Selvakumar Arumugam Sep 27 '13 at 13:44

JQuery Newbie Refining toggleClass?

3 Answers3