jQuery document.location.href if, else if and else

Question

I know else if works on jQuery so where's the problem in this code:

if (document.location.href.indexOf('#1')) {
    $(".products li").fadeIn();
}
else if (document.location.href === '#2') {
    $(".products li").fadeOut();
    $(".products li.2").stop(true,true).fadeIn(200);
}
else if (document.location.href === '#3') {
    $(".products li").fadeOut();
    $(".products li.3").stop(true,true).fadeIn(200);
}
else if (document.location.href === '#4') {
    $(".products li").fadeOut();
    $(".products li.4").stop(true,true).fadeIn(200);
}
else if (document.location.href === '#5') {
    $(".products li").fadeOut();
    $(".products li.5").stop(true,true).fadeIn(200);
}
else if (document.location.href === '#6') {
    $(".products li").fadeOut();
    $(".products li.6").stop(true,true).fadeIn(200);
}
else {
    $(".products li").fadeIn();
}

If i put only if instead of else if it works but it's not correct.

[The correct object is `window.location`, not `document.location` -- although both will work in modern browsers.](http://stackoverflow.com/questions/2430936/whats-the-difference-between-window-location-and-document-location-in-javascript) — Blazemonger, Dec 17 '12 at 14:54
I've got a clickable list with different categories, when you click a category it'll display only the products with that category Id. — simo, Dec 17 '12 at 14:55

Blazemonger · Accepted Answer · 2012-12-17T15:48:39.350

The expression document.location.href.indexOf('#1') will return -1 if no match is found, and zero if it matches at the start of the string. Since you test for falsey values, you'll never have a false result (-1 evaluates as a Boolean true). You should have written:

if (document.location.href.indexOf('#1')>-1) {

But since you appear to be comparing hashes, let's just do those directly instead (and use the proper window.location while we're at it):

if (window.location.hash == '#1') {
    // ...
} else if (window.location.hash == '#2') {
    // etc.

That said, in your case, we can do this entirely without the if/else just by parsing that hash string:

var hash = window.location.hash.substr(1); // remove leading #
if (hash) {
    $(".products li").fadeOut();
    $(".products li."+hash).stop(true,true).fadeIn(200);
} else {
    $(".products li").fadeIn();
}

Thank you. Your last solution it's pretty amazing. – simo Dec 17 '12 at 15:13 — simo, Dec 17 '12 at 15:13

score 1 · Answer 2 · answered Dec 17 '12 at 14:59

1

It looks like you want to check for the hashvalue in the url, so why don't you use

location.hash

since location.href includes the whole url

answered Dec 17 '12 at 14:59

Flo

21
3

Yeah, what I want is to check for the hashvalue in the url. If I use location.hash the first if it changes like this if (window.location.hash === '#1') ? – simo Dec 17 '12 at 15:01
Yes, but Blazemonger explained it beautifully in his answer. Just go with what he explained. – Flo Dec 17 '12 at 15:12

score 0 · Answer 3 · answered Dec 17 '12 at 14:55

0

in the first if you are using indexOf:

if (document.location.href.indexOf('#1'))

But in the other else if you don't use it but rather you compare the href.location itself:

else if (document.location.href === '#2')

answered Dec 17 '12 at 14:55

Tomer

17,787
15
78
137

Probably OP meant to use `document.location.hash` instead. – Blazemonger Dec 17 '12 at 14:57

jQuery document.location.href if, else if and else

3 Answers3