Alternative to multiple if else statements in javascript

Question

My question is very similar to Reduce multiple if else statements

I have multiple if else statements and I'd like to use the jquery each function to make the code more efficient, but I can't figure out how to do it.

I'm running jQuery in wordpress which I believe runs in noconflict mode, so I can't get a lot of the more (what I consider) advanced topics which give examples to work for me, as I can't understand the right function syntax to use.

If anyone could help and explain how to do it for me that would be amazing. Here is my code:

var $h6p = $("h6 + p");
var $h5p = $("h5 + p");
var $h4p = $("h4 + p");
var $h3p = $("h3 + p");
var $h2p = $("h2 + p");
var $h1p = $("h1 + p");
var $fullercolor_bg = "rgba(240,234,222,0.9)";

if($h1p.mouseIsOver()) {
    $h1p.prev().css("background-color", $fullercolor_bg);
} else {
    $h1p.prev().css("background-color", "");
}
if($h2p.mouseIsOver()) {
    $h2p.prev().css("background-color", $fullercolor_bg);
} else {
    $h2p.prev().css("background-color", "");
}
if($h3p.mouseIsOver()) {
    $h3p.prev().css("background-color", $fullercolor_bg);
} else {
    $h3p.prev().css("background-color", "");
}
if($h4p.mouseIsOver()) {
    $h4p.prev().css("background-color", $fullercolor_bg);
} else {
    $h4p.prev().css("background-color", "");
}
if($h5p.mouseIsOver()) {
    $h5p.prev().css("background-color", $fullercolor_bg);
} else {
    $h5p.prev().css("background-color", "");
}
if($h6p.mouseIsOver()) {
    $h6p.prev().css("background-color", $fullercolor_bg);
} else {
    $h6p.prev().css("background-color", "");
}

(If CSS had a previous adjacent siblings selector I would be over the moon at this point.)

Edit: Thanks for the help so far, one thing I should have mentioned is the empty setting of the else statement is deliberate. I have used CSS to target the sibling selector and the background-color is set in that, so I need that to be set. Not transparent.

Answer 1

Maybe you can do something like this, by using the :header selector.

$(':header + p').each(function () {
    var $this = $(this);

    $this.prev().css({
        backgroundColor: $this.mouseIsOver()? 'rgba(240,234,222,0.9)' : 'transparent'
    });
});

Answer 2

You could use an array:

var $hp = ["h6 + p", "h5 + p", "h4 + p", "h3 + p", "h2 + p", "h1 + p"],
    $fullercolor_bg = "rgba(240,234,222,0.9)";

$hp.forEach(function(v) {
    if($(v).mouseIsOver()) {
        $(v).prev().css({
            backgroundColor: $fullercolor_bg
        });
    } else {
        $(v).prev().css({
            backgroundColor: "transparent"
        });
    }
});

In your case I think it's simpler to use multiple CSS selectors within the variable. This may or may not work depending on the implementation of mouseIsOver :

var $hp = $("h6 + p, h5 + p, h4 + p, h3 + p, h2 + p, h1 + p"),
    $fullercolor_bg = "rgba(240,234,222,0.9)";

if($hp.mouseIsOver()) {
    $hp.prev().css({
        backgroundColor: $fullercolor_bg
    });
} else {
    $hp.prev().css({
        backgroundColor: "transparent"
    });
}

Answer 3

Make a selector to get all the elements in a single jQuery object, then use the each method to loop through them:

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  if($(el).mouseIsOver()) {
    $(el).prev().css("background-color", $fullercolor_bg);
  } else {
    $(el).prev().css("background-color", "");
  }
});

Or using a conditional operator to select the value:

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  $(el).prev().css("background-color", $(el).mouseIsOver() ? $fullercolor_bg : "");
});