Multiple else if Statements in jQuery

Question

        $('#bar3').live('click', function() {
            if($('#bar3').attr('class') == '0') {
                console.log("closed")
            } else if($('#bar1' && '#bar2').attr('class') == '0') {
                console.log("Both")
            } else if($('#bar1').attr('class') == '0') {
                console.log("Summary Open")
            } else if($('#bar2').attr('class') == '0') {
                console.log("HIP Open")
            } else {
                console.log("open") 
            }
         });

Why does this not work?

I know what it's doing, I just don't know what to change to fix it.

This part is wrong:

else if($('#bar1' && '#bar2').attr('class') == '0')

Answer 1

$('#bar1' && '#bar2').attr('class') == '0'

should be

$('#bar1').attr('class') == "0" &&  $('#bar2').attr('class') == "0"

&& is a valid java script operator, but not valid as part of a jquery selector.

Answer 2

Because you are simply using the wrong syntax. This:

$('#bar1' && '#bar2').attr('class') == '0'

would need to be written more like

$('#bar1').attr('class') == '0' && $('#bar2').attr('class') == '0'

But that still leaves major issues:

• What is .attr('class') == '0' supposed to do? Do you have a class named 0? If so, the correct way would be .hasClass('0').
• You keep re-wrapping DOM elements in jQuery objects. Do it only once and store the results, e.g. var $bar1 = $('#bar1') and then use $bar1 again and again.