CODEWITHSUNDEEP
jquery
webmonkey237
webmonkey237

Reputation: 379

jQuery: Add class based on URL ?id=

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

Upvotes: 1

Views: 56

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

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

});

Upvotes: 2

kapantzak
kapantzak

Reputation: 11750

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

Upvotes: 0

Related Questions