子元素的jquery迭代

對於簡單的菜單，我使用jQuery在菜單選項懸停時淡入特定的h1。我可以爲每個元素編寫代碼行，但我想知道如何使用迭代更高效地編寫代碼。子元素的jquery迭代

<ul class="menu_locations"> 
    <li><a>Option A</a></li> 
    <li><a>Option B</a></li> 
    <li><a>Option C</a></li> 
    <li><a>Option D</a></li> 
</ul> 

<div class="menu_info"> 
    <h1>This is option A</h1> 
    <h1>This is option B</h1> 
    <h1>This is option C</h1> 
    <h1>And finally we have D</h1> 
</div>

這是我認爲它應該看起來像jQuery的

$(".menu_locations").children().each().hover(
    function() { 
     $("").fadeIn(); 
    }, function() { 
     $("").fadeOut(); 
});

來源

2017-09-14 Grommit

$（「類」）返回元素的列表是document.getElementsByClassName相當於。所以你可以做$（「。myclass li」），它將返回myclass中的所有li，不需要每個。 – user5014677

沒有必要爲each，jQuery的迭代內部
你可以使用索引來針對H1具有相同的索引，和stop將停止動畫，當其他東西被徘徊時。

您也可以使用fadeToggle進出在相同的處理都褪色

$(".menu_locations li").hover(function() { 
 
    $(".menu_info h1").eq($(this).index()).stop(true, true).fadeToggle(); 
 
});

.menu_info h1 {display:none; position: absolute}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menu_locations"> 
 
    <li><a>Option A</a></li> 
 
    <li><a>Option B</a></li> 
 
    <li><a>Option C</a></li> 
 
    <li><a>Option D</a></li> 
 
</ul> 
 

 
<div class="menu_info"> 
 
    <h1>This is option A</h1> 
 
    <h1>This is option B</h1> 
 
    <h1>This is option C</h1> 
 
    <h1>And finally we have D</h1> 
 
</div>

來源

2017-09-14 12:11:38 adeneo

這真的很有幫助，非常感謝！ –

這很好，但是就像在你的例子中那樣，過渡是重疊的。這會產生奇怪的疊加效果，您可以簡要地看到兩行h1。我如何得到這個消失？ – Grommit

另外，出於某種原因，我不知道，第二個信息h1線不斷重播懸停動畫（它閃爍），而將鼠標移動元素。其他菜單選項沒有這個。 – Grommit

子元素的jquery迭代

回答

相關問題