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

每个链接都会重复此操作。链接和后台div由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

首先，您需要移动线

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

在悬停调用中。在您的版本中，$（this）指的是$（文档）。

其次，只有当您的$('div#navigation a')项目的“A”或“B”类作为其第一个（或唯一的）类时，这才有效，否则您将不得不循环使用所有带有each（）的类，并找到一种方法来选择正确的类。

有关详情，请参阅this问题。

Answer 2

我认为这应该有效。另请参阅密度21.5 答案了解详情。

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

Answer 3

如果你发布你的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');
        });
});

如果使用＆lt;

使用.delegate() jQuery 1.7 否则使用.on()

从html Link类创建和使用jQuery变量

3 个答案: