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

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

任何帮助将是伟大的。

下面的代码：

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

来源

2011-06-27 tecmec

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

你可以把它简化为这样：

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

来源

2011-06-27 13:29:26 PetersenDidIt

非常感谢:-) – tecmec

请仔细阅读此琴：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拥有循环建立在如果你申请的operati如.hide()，它将其应用于整个集合。如果您编写for循环来遍历jQuery集合，那么您就错了。
一般而言，您会希望使用一种将您的锚标记与其所处理的目标相关联的技术。当href不是外部页面而是内部引用（使用＃号）时，通常这是通过href属性完成的。您会看到我用它作为对关联的LI ID的引用。

来源

2011-06-27 13:31:33

这也是一个非常好的解决方案。 Thx Adam – tecmec

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

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

来源

2011-06-27 13:39:15

非常感谢您的建议，我会在将来继续留意这一点。 – tecmec

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

回答

相关问题