子元素的jQuery迭代

Question

对于一个简单的菜单，当菜单选项悬停时，我使用 jQuery 淡入特定的 h1。我可以为每个元素编写代码行，但我想知道如何使用迭代更有效地编写代码。

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

Answer 1

不需要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>