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>

子元素的Jquery迭代

1 个答案: