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

Posted 2023-03-05

【中文标题】从 html Link 类创建和使用 jQuery 变量

【英文标题】：Creating and using jQuery Variables from html Link class

【发布时间】：2012-03-10 07:15:49

【问题描述】：

刚刚开始使用 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');
);;

【问题讨论】：

你有很多意想不到的; --> );; --> );

我对 javascripting 来说是非常新的！...并且已经订购了一本书来学习！以为我可以通过在线阅读来解决这个问题，但失败了！关于如何实现这一目标的任何指示？是意外的字符阻止了它的工作，还是我偏离了目标百万英里？谢谢！

html tbh 没有太多内容，基本的无序导航列表，其中每个链接都有一个唯一的类，那么我所说的背景 div 只是文档中其他地方匹配的元素链接的类。例如悬停时链接 a.classA 应该会影响 div# .classA。

【参考方案1】：

首先，你需要移动线

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

在悬停调用中。在您的版本中，$(this) 指的是 $(document)。

其次，这仅适用于您的 $('div#navigation a') 项目将“A”或“B”类作为它们的第一个（或唯一）类，否则您将必须循环浏览所有类使用 each() 并找到一种方法来选择正确的类。

有关更多信息，请参阅this 问题。

【参考方案2】：

我认为这应该可行。另请查看 Density 21.5 的 答案以了解详细信息。

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

【讨论】：

太棒了——谢谢大家。我知道这比我做的更简单！等不及我自己能够做到这一点！

【参考方案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');
        );
);

如果使用 .delegate() 否则使用.on()