Создание и использование переменных jQuery из класса html Link

Только начинать с jQuery, и я уверен, что это основной материал для тех, кто знает, но я не могу заставить его работать.

У меня очень простой и повторяющийся скрипт, который я пытаюсь оптимизировать, что меняет цвет фона фонового div, когда зависают определенные ссылки. т.е. каждая ссылка имеет связанный фоновый div.

$('div#navigation a.A').hover(function(){
$('div#bg-nav .A').addClass('bg-active');
},function(){
$('div#bg-nav .A').removeClass('bg-active');
});;

$('div#navigation a.B').hover(function(){
$('div#bg-nav .B').addClass('bg-active');
},function(){
$('div#bg-nav .B').removeClass('bg-active');
});;

Это повторяется для каждой ссылки. Связи и фоновые divs создаются динамически CMS, поэтому ручное обновление этого скрипта каждый раз, когда добавляется страница, не является идеальным. И я не могу использовать чистый CSS, потому что ссылки связаны с div в структуре страницы.

Поскольку существует очевидная закономерность (фоновые divs имеют тот же класс, что и триггерные ссылки), я полагал, что должно быть возможно использовать класс зависающей ссылки, чтобы повлиять на соответствующий div, передав переменную на селектора, что-то как ниже, но как новый, я не могу заставить его работать!

$(document).ready(function() {
var linkClass = $(this).attr("class");
$("div#navigation a").hover(function() {
$('div#bg-nav.'+ linkClass).addClass('bg-active');
},function(){
$('div#bg-nav.'+ linkClass).removeClass('bg-active');
});;
3 ответа

Я думаю, что это должно сработать. Также обратите внимание на ответ Density 21.5.

$('#navigation a').hover(function () {
 $('#bg-nav').find('.'+ $(this).attr('class')).toggleClass('bg-active');
});


Во-первых, вам нужно переместить линию

var linkclass= $(this).attr("class");

внутри звонка. В вашей версии $ (this) относится к $ (document).

Во-вторых, это будет работать, только если ваши объекты $('div#navigation a') имеют класс "A" или "B" как свой первый (или единственный) класс, иначе вам придется циклически перебирать все классы с каждым() и найдите способ выбора правильного класса.

см. этот вопрос, чтобы узнать больше об этом.


если u post ur html это wud будет более полезным, однако, если я догадался, что этот код должен работать

$(document).ready(function(){
 var linkclass;
 $('#id_of_link').on('click',function(){
 linkclass = $(this).attr('class'); 
 });
 $("div#navigation a").hover(function() {
 $('div#bg-nav.').find(linkclass).addClass('bg-active');
 },function(){
 $('div#bg-nav.').find(linkclass).removeClass('bg-active');
 });
});

используйте .delegate() если использовать .on()

licensed under cc by-sa 3.0 with attribution.