子元素的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迭代

回答

相关问题