Question

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

任何帮助都会很棒。

这是代码：

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>

情侣笔记：

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

Answer 3

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

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

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

3 个答案: