Question

I have about 30 clickable divs on my page so I figured I would use their class name to trigger click events.

$('div.select_statement_option_on').live('click', function() {
    $(this).attr('class', 'select_statement_option_off');
});
$('div.select_statement_option_off').live('click', function() {
    $(this).attr('class', 'select_statement_option_on');        
});

Now I have come up against a barrier where in one of the 35 divs is clicked, some extra work is done so I added this

$('div#sel_total_cost').click(function() {
    if ($(this).attr('class', 'select_statement_option_off')) {
        $('div#sel_reg_type').attr('class', 'select_statement_option_on');
        $('div#sel_days_reg').attr('class', 'select_statement_option_on');
        $('div#sel_add_tickets').attr('class', 'select_statement_option_on');
        $('div#sel_reg_date').attr('class', 'select_statement_option_on');
        $('div#sel_pcode_disc').attr('class', 'select_statement_option_on');
    }
});

So in the #sel_total_cost div, if I click it from it’s initial state (select_statement_option_off), the ID click function is fired, followed by the class click function. The trouble comes when I try to click it to turn it off. The ID function is fired, and then for some reason the class of the div is changed to be ‘off’ (without the ‘on’ class function firing) and then the ‘off’ class function is fired and the div goes back on. That’s what I see from stepping through, but to watch it, it basically means you can’t turn it off once it’s on. How can I sort out this order of events?

Answer from lonesomeday

Turns out that the if statment was assigning the class rather than checking to see if my div had that class. Updated if statment below

$('div#sel_total_cost').click(function() {
    if ($(this).hasClass('select_statement_option_off')) {
        $('div#sel_reg_type').attr('class', 'select_statement_option_on');
        $('div#sel_days_reg').attr('class', 'select_statement_option_on');
        $('div#sel_add_tickets').attr('class', 'select_statement_option_on');
        $('div#sel_reg_date').attr('class', 'select_statement_option_on');
        $('div#sel_pcode_disc').attr('class', 'select_statement_option_on');
    }
});

Also noted is to not use ‘live’ to bind elements anymore. It is deprecated and performs poorly by comparison to the newer ‘.on()’ function in jQuery 1.7 so I have changed my handlers to look like this

$('div#select_statement_box').on('click', 
    'div.select_statement_option_off', function() {
    $(this).attr('class', 'select_statement_option_on');
});

Where select statement box is the container with my divs in it.

Answer 1

if ($(this).attr('class', 'select_statement_option_off')) {

That doesn’t do what you think. It sets the class to select_statement_option_off, then returns the jQuery selection. (See attr.) This will always be truthy, so the conditional will always pass. The class will also always be select_statement_option_off, hence the other behaviour.

You need to do a comparison. You could do this with ===:

if ($(this).attr('class') === 'select_statement_option_off') {

Better would be to let jQuery do the work and use hasClass:

if ($(this).hasClass('select_statement_option_off')) {

This has an additional advantage: if your HTML changes in future to add other classes (it’s entirely possible!) then this last option will not require changing the Javascript. jQuery abstracts this away for you.