jquery index() - 悬停列表项,显示具有相同索引的内容

Question

我有一个小菜单的jquery问题.我有一个菜单项列表.当我将鼠标悬停在其中一个列表项上时,我想显示与列表项共享相同索引的div列表中的内容.这需要是动态的,允许任意数量的菜单项和内容项.

$(document).ready(function() {
    $("#leftnav li").each(function(){
        $(this).mouseover(function() {
            //SHOW div that shares same index as this li
        });
        $(this).mouseout(function() {
            //HIDE div that shares same index as this li
        });
    });
});

<ul id="leftnav">
    <li>Link 1</li>
    <li>Link 2</li>
</ul>

<div id="content">
    <div>Content 1</div>
    <div>Content 2</div>
</div>

Answer 1

我可能会使用hover()方法来简化这个(或者hoverIntent插件,它解决了一些其他问题,比如快速鼠标移动的问题).

$(function() {
     $('#leftnav li').hover(
          function() {
               var idx = $('#leftnav li').index(this);
               $('#content div').eq(idx).show();
          },
          function() {
               var idx = $('#leftnav li').index(this);
               $('#content div').eq(idx).hide();
          }
      }):
});