jQuery: Add class based on URL ?id=

Question

This is beyond my basic knowledge of jQuery but hopefully someone can point me in the right direction.

I need to look at the URL http://something.com/pagename?id=# (# represents a number starting at 1)

Get the number then find the relating "rel" number on the a tag (or the class slider# if thats easier).

Add the class "on" to the a tag also make sure to remove the "on" class off all others (the first a tag has the class "on" as default).

<ul class="slider clearfix">

<li class="list">
<a class="change_trigger on slider1" href="javascript:void(0);" rel="1"><img     src="files/images/some1.jpg" alt=""></a>
</li>
<li class="list">
<a class="change_trigger slider2" href="javascript:void(0);" rel="2"><img src="files/images/some2.jpg" alt=""></a>
</li>
<li class="list">
<a class="change_trigger slider3" href="javascript:void(0);" rel="3"><img src="files/images/some3.jpg" alt=""></a>
</li>
<li class="list">
<a class="change_trigger slider4" href="javascript:void(0);" rel="4"><img src="files/images/some4.jpg" alt=""></a>
</li>
</ul>

EXAMPLE:

URL

http://something.com/pagename?id=3

RESULT

<ul class="slider clearfix">

<li class="list">
<a class="change_trigger slider1" href="javascript:void(0);" rel="1"><img     src="files/images/some1.jpg" alt=""></a>
</li>
<li class="list">
<a class="change_trigger slider2" href="javascript:void(0);" rel="2"><img src="files/images/some2.jpg" alt=""></a>
</li>
<li class="list">
<a class="change_trigger on slider3" href="javascript:void(0);" rel="3"><img src="files/images/some3.jpg" alt=""></a>
</li>
<li class="list">
<a class="change_trigger slider4" href="javascript:void(0);" rel="4"><img src="files/images/some4.jpg" alt=""></a>
</li>
</ul>

As this is quite technical I have done a bit of searching and found a script that looks at the URL string after equals the I am not sure that this is the best approach.

function getQueryString() {
 var result = {}, queryString = location.search.substring(1),
 re = /([^&=]+)=([^&]*)/g, m;

 while (m = re.exec(queryString)) {
 result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
 }
return result;
}

window.addEventListener("load", function() {
//FIND THE RELATING REL NUMBER, ADD THE CLASS "ON", REMOVE "ON" FROM OTHERS
});

Thanks

Gabriele Petrioli · Accepted Answer · 2016-03-10 22:30:24Z

2

Alter your final part to

window.addEventListener("load", function() {
//FIND THE RELATING REL NUMBER, ADD THE CLASS "ON", REMOVE "ON" FROM OTHERS
    var q = getQueryString(),
        id = q.id;

    $('.slider .change_trigger')
       .removeClass('on')
       .filter('[rel="'+id+'"]')
       .addClass('on');

});

answered Mar 10, 2016 at 22:30

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

webmonkey237 Over a year ago

Perfect!, what ever you do, you need a raise :)

kapantzak · Accepted Answer · 2016-03-10 22:29:59Z

0

Use the split() method to get the id:

var urlId = url.split('?')[1].replace('id=', '');
var elem = $('.change_trigger');
elem.removeClass('on')
     .filter('[rel=' + urlId + ']')
     .addClass('on');

answered Mar 10, 2016 at 22:29

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

1 Comment

webmonkey237 Over a year ago

Sorry didn't try your option out as the other worked but thank you for your help!

Collectives™ on Stack Overflow

jQuery: Add class based on URL ?id=

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related