在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懸停效果不起作用

回答

相關問題