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