在 for 循环中添加 jQuery 悬停效果不起作用答案

【问题标题】：Adding jQuery hover effect within a for loop doesn't work在 for 循环中添加 jQuery 悬停效果不起作用
【发布时间】：2023-03-29 11:43:01
【问题描述】：

正如标题所说，我尝试在 for 循环中为不同的 a-tag 添加 jquery 悬停效果。添加了悬停效果，但里面的隐藏显示功能似乎是错误的。我总是得到最后一个 li 元素的选择器。

任何帮助都会很棒。

http://jsfiddle.net/pGgeW/1/

代码如下：

html:

<a id="o1" href="#">Show Text 1</a>
<a id="o2" href="#">Show Text 2</a>
<a id="o3" href="#">Show Text 3</a>
<a id="o4" href="#">Show Text 4</a>
<a id="o5" href="#">Show Text 5</a>

<ul class="subTxt">
    <li id="u1">Text 1</li>
    <li id="u2">Text 2</li>
    <li id="u3">Text 3</li>
    <li id="u4">Text 4</li>
    <li id="u5">Text 5</li>
</ul>

javascript：

/* Hide li's */
$("ul.subTxt").find("li").each(

function() {
    $(this).hide();
});

/* Add Hover-Events */
for (var a = 1; a < 6; a++) {
    var k = '#o' + a;
    var e = '#u' + a;
    $(k).hover(

    function() {
        $(e).show();
        $(this).append('<div id="hk" style="position: relative;float: right;">' + k + ' ' + e + '</div>');
    }, function() {
        $(e).hide();
        $(this).find('#hk').remove();
    });
}

【问题讨论】：

欢迎来到 Stack Overflow。如果您发现下面我的回答对您有帮助并且解决了您的问题，请单击它左侧的复选框，将其标记为答案，以便其他人可以轻松找到它。谢谢！

标签： jquery for-loop hover jquery-hover

【解决方案1】：

您可以将其简化为：

/* Hide li's */
$("ul.subTxt li").hide();

$("a.hover").hover(function(){
    var n = this.id.replace("o","");
    $("#u"+n).show();
}, function() {
    var n = this.id.replace("o","");
    $("#u"+n).hide();
});

http://jsfiddle.net/petersendidit/pGgeW/3/

【讨论】：

【解决方案2】：

请查看此小提琴：http://jsfiddle.net/pGgeW/9/

$("ul.subTxt").find("li").hide();

$("a").hover(function(e) {
    $($(this).attr('href')).toggle();
}).click(function() { return false; });

HTML：

<a href="#u1">Show Text 1</a>
<a href="#u2">Show Text 2</a>
<a href="#u3">Show Text 3</a>
<a href="#u4">Show Text 4</a>
<a href="#u5">Show Text 5</a>

<ul class="subTxt">
    <li id="u1">Text 1</li>
    <li id="u2">Text 2</li>
    <li id="u3">Text 3</li>
    <li id="u4">Text 4</li>
    <li id="u5">Text 5</li>
</ul>

情侣笔记：

jQuery 内置了循环。如果您应用类似.hide() 的操作，它会将其应用到整个集合。如果你写了一个for 循环来遍历一个jQuery 集合，那你就错了。
通常，您需要使用一种技术，将您的锚标记与其作用的目标相关联。当 href 不是外部页面而是内部引用（使用 # 符号）时，通常使用 href 属性完成此操作。您会看到我使用它作为对关联 LI ID 的引用。

【讨论】：

这也是一个很好的解决方案。谢谢亚当

【解决方案3】：

问题在于e 和k 变量是全局变量。一种选择是将该代码包装在一个函数中。这样e 和k 是该函数的本地函数。像这样：

http://jsfiddle.net/pGgeW/8/

【讨论】：

感谢您的建议，我会牢记这一点。