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.

Put all the jQuery objects in an array, iterate over the array and apply the logic to each element of the array. If you don't know how to work with arrays: http://eloquentjavascript.net/chapter4.html. — Felix Kling, Aug 07 '13 at 12:57

plalx · Answer 1 · 2013-08-07T13:16:18.307

5

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'
    });
});

edited Aug 07 '13 at 13:16

answered Aug 07 '13 at 13:10

plalx

42,889
6
74
90

Care to reference or explain `:header`? – rink.attendant.6 Aug 07 '13 at 13:13
@rink.attendant.6 I just learned it while trying to find a good answer =P I always found that answering questions was as good as asking ones to learn hehe ;) – plalx Aug 07 '13 at 13:20
I just tried it out and this seems to target every single p on the page, not just the adjacent ones to the headers. – patrickzdb Aug 07 '13 at 13:53
@patrickzdb Well, I cannot test with `mouseIsOver` right now because of some browser limitations, however I tested with jQuery 1.10.2 and it effectively target's the correct elements. Are you sure that your implementation was correct? Which jQuery version are you running? – plalx Aug 07 '13 at 15:33

rink.attendant.6 · Accepted Answer · 2013-08-07T13:04:34.313

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"
    });
}

edited Aug 07 '13 at 13:04

answered Aug 07 '13 at 12:59

rink.attendant.6

44,500
61
101
156

Whether or not this works depends on how `.mouseIsOver()` is implemented. – Felix Kling Aug 07 '13 at 13:00
I grabbed the '.mouseIsOver()' from [link](http://stackoverflow.com/a/17349997/1134053). That code didn't work when I tried it, but it did for a single (just h6 + p) selector. – patrickzdb Aug 07 '13 at 13:51
1

Sorry, the first code you provided works and hence the accepted answer. The second block of code didn't. – patrickzdb Aug 07 '13 at 14:02

score 1 · Answer 3 · answered Aug 07 '13 at 13:01

1

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 : "");
});

answered Aug 07 '13 at 13:01

Guffa

687,336
108
737
1,005

This changes every header whenever an adjacent p is hovered, not just the first preceding one. Could be to do with how the ismousehover function works though, [isMouseHover](http://stackoverflow.com/a/17349997/1134053) – patrickzdb Aug 07 '13 at 13:59
@patrickzdb: No, the code loops through the elements one by one, just like the code in the accepted answer that was posted a little later... – Guffa Aug 07 '13 at 14:10

Alternative to multiple if else statements in javascript

3 Answers3