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

Question

正如标题所说，我尝试在 for 循环中向不同的 a 标签添加 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();
    });
}

Answer 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/

Answer 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>

几个注释：

1. jQuery 内置了循环。如果您应用像 .hide() 这样的操作，它会将其应用于整个集合。如果您编写 for 循环来迭代 jQuery 集合，那么您就错了。
2. 一般来说，您需要使用一种技术将您的锚标记与其所作用的目标相关联。通常，当 href 不是外部页面而是内部引用（使用 # 符号）时，这是通过 href 属性完成的。您将看到我将其用作关联 LI ID 的引用。

Answer 3

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

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