jQuery: Add class based on url parameters

Question

I have an 'h1' tag that i need to add a class to change its colour based on the url parameter. I have two parameters that are passed so depending on which one a different class is added.

I have seen a previous post by @Matt Martin with an answer by @Florian Margaine which uses Switch statements which looks like a nice method, nut i cannot seem to get it to work.

I have tried the following with no success:

HTML:

<h1 id="head" class="page-head">About Right to Manage for</h1>

jQuery:

$(function() {
 switch (window.location.pathname) {
   case '?type=private':
    $('#head').addClass('private')
   case '?type=retirement':
    $('#head').addClass('retirement')
}
});

so I would have either of the following:

<h1 id="head" class="page-head private">About Right to Manage for</h1>

or

<h1 id="head" class="page-head retirement">About Right to Manage for</h1>

If you are not aware what pathname means, then log it to console or go read up on it. — C3roe
– C3roe, Commented May 24, 2018 at 9:53
(if you really need to get the URL parameters in javascript), see window.location.search instead — Kaddath
– Kaddath, Commented May 24, 2018 at 9:56
apologies for my ignorance @Cbroe but I have researched matters. Im clearly out of my depth so any pointers would be most appreciated. — Steve Joiner
– Steve Joiner, Commented May 24, 2018 at 10:08

score 1 · Accepted Answer · 2018-05-24 10:44:11Z

1

Try to do this (put in default the pathname) :

$(function() {
 switch (window.location.pathname) {
   case '/about-rtm.php?type=private':
    $('#head').addClass('private')
     break;
   case '/about-rtm.php?type=retirement':
    $('#head').addClass('retirement')
     break;
   default :
   $('h1').append(window.location.pathname);
}
});

It 'll append on your h1 the pathname, so you can check it. (also console.log())

Edit

Maybe if data is not loaded, you can try this :

$(document).ready(function(){...});

or

window.onload = function()
{
  //your code here
};

EDIT #2

let searchParams = new URLSearchParams(window.location.search)
searchParams.has('type') // true
let param = searchParams.get('type') // it could be private or retirement
if(param === 'private'){...}
else if(param === 'retirement'){....}

//or

sitch(param){

case 'private': 
.
.
.

}

edited May 24, 2018 at 10:44

answered May 24, 2018 at 10:11

user9757842

Sign up to request clarification or add additional context in comments.

4 Comments

Damian Dziaduch Over a year ago

you missed break; statements ;)

user9757842 Over a year ago

@SteveJoiner but the appended pathname (h1) is ''/about-rtm.php?type=private'' or "/about-rtm.php?type=retirement" ?

Steve Joiner Over a year ago

@Cristian I am testing this on localhost so the pathname being appended on both accounts is /RTMF_3_root/about-rtm.php. the parameters are not being appended.

Steve Joiner Over a year ago

Your efforts are appreciated @Cristian but i don't understand how I would adapt this to test.

Collectives™ on Stack Overflow

jQuery: Add class based on url parameters

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related