hasClass doesn't function as it should

Question

I have a list of li items and would like to trigger a button click if 2 classes are found .

When a list item has 2 classes, I would like to trigger the btn with a click. Can you guys take a look for me?

The code:

<script type="text/javascript"> 
$(document).ready(function(){ 

    var $html = $("#my-div ul li");
    if ($html.hasClass("current") || $html.hasClass("extra")) {
        $(".btn-1 a").click();}
    else if ($html.hasClass("current") || $html.hasClass("extra2")) {
        $(".btn-2 a").click();}
});
</script>

So one list item has class current + extra , and the other list item hasClass current + extra2 .

Any idea what I am doing wrong here?

EDIT: Currently it does not work as should be.

It currently will always trigger ".btn-1" to click and does not look at the other statements. I think it just looks at the "current" class and not if also the "extra" or "extra2" class is in the same li item.

Answer 1

Try this:

<script type="text/javascript"> 
$(document).ready(function(){ 

    var $html = $("#my-div ul li.current");
    if ($html.hasClass("extra")) {
        $(".btn-1 a a").click();}
    else if ($html.hasClass("extra2")) {
        $(".btn-2 a").click();}
});
</script>

The problem is, when you do $html.hasClass("current") || .. $html.hasClass("current") || .. it would always evalutate to true and would not go to the else clause when node has a class current

Answer 2

You are making a comparison of a or b where you need a and b so change it to this:

<script type="text/javascript"> 
$(document).ready(function(){ 

    var $html = $("#my-div ul li");
    if ($html.hasClass("current") && $html.hasClass("extra")) {
        $(".btn-1 a a").click();}
    else if ($html.hasClass("current") && $html.hasClass("extra2")) {
        $(".btn-2 a").click();}
});
</script>

Answer 3

Try replacing

$html.hasClass("current") || $html.hasClass("extra")

with

$html.hasClass("current") && $html.hasClass("extra")

and also

$html.hasClass("current") || $html.hasClass("extra2")

with

$html.hasClass("current") && $html.hasClass("extra2")

Answer 4

The original root of the problem is that you're using or ( || ) and not and ( && ) when testing for classes. You're asking "if li has class current OR extra".

However, you can also refactor it a bit and make it a little cleaner as well:

// first, grab the <li> marked as current
var $current = $('#my-div ul li.current');
// test if we have a match and proceed
if ($current.size()){
    // cache the final target selector (by initializing it to `false` we
    // can later test and only execute the click when we have a match)
    var target = false;

    // now get in to second-level classes (can use either `.is()` or
    // `.hasClass()` (thought I'd show an alternative method as well))
    if ($current.hasClass('.extra')) target = '.btn-1 a a';
    else if ($current.hasClass('.extra2')) target = '.btn-2 a';
    // else if ($current.hasClass('...')) target = '...'; // more tests

    // see if we found a match and click it
    if (target) $(target).click();
}