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

Question

Только начинаю с 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');
});;

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

Поскольку существует очевидная закономерность (фоновые div имеют тот же класс, что и ссылки триггера), я подумал, что должна быть возможность использовать класс связываемой ссылки, чтобы воздействовать на соответствующий 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');
});;

Answer 1

Я думаю, что это должно работать.Также взгляните на Density 21.5's ответ для подробностей.

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

Answer 2

если вы публикуете html, это будет более полезно, однако, если я угадаю, этот код должен работать

$(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()

Answer 3

Прежде всего, вам нужно переместить линию

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

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

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

см. этот вопрос для получения дополнительной информации по этому вопросу.