2016-03-10 3 views
1

Это не соответствует моим основным знаниям jQuery, но, надеюсь, кто-то может указать мне в правильном направлении.jQuery: Добавить класс на основе URL? Id =

мне нужно посмотреть на URL http://something.com/pagename?id=# (# представляет собой номер, начинающийся с 1)

Получите то число найти относящуюся «отн» номер на тег (или если то проще класс слайдер #) ,

Добавить класс «on» в тег также не забудьте удалить класс «on» из всех остальных (первый тег имеет класс по умолчанию).

<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> 

Пример:

URL

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

РЕЗУЛЬТАТ

<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> 

Поскольку это довольно техническая Я сделал немного поиска и нашел скрипт, который смотрит на строка URL после равенства, я не уверен, что это будет й подход.

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

Благодаря

ответ

2

Alter вашу заключительную часть в

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

}); 
+1

Отлично !, что бы вы ни делали, вам нужен рейз :) – webmonkey237

+0

@ webmonkey237 lol: D –

0

Используйте метод split(), чтобы получить идентификатор:

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

К сожалению, не попробовать свой вариант, как другой работал, но спасибо за вашу помощь! – webmonkey237

+0

Добро пожаловать! Хороший ответ от Габи! – kapantzak

Смежные вопросы