将当前状态添加到每个列表项中

Question

我有一个无序的列表与一些项目，导致另一个div，我显示在悬停。

html

<div class="dotdiv">
  <ul>
    <li>Item</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>

   <div class="info-1"></div>
   <div class="info-2"></div>
   <div class="info-3"></div>
</div>

javascript

$(function(){
$('.dotdiv li').hover(function(){
    $('.info-' + $(this).attr('id').replace('li','')).show();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');

},function(){
    $('.info-' + $(this).attr('id').replace('li','')).hide();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');
});
}); 

现在当我在第1，2条上空盘旋时.它是显示的，当我悬停时，项目仍然停留在那里，就像我希望的那样。但现在，如果我回去试着展示其中的任何一个项目，最后一个只能是可见的。因此，我猜我需要更新我的脚本，并确保它的工作，无论您悬停的项目的顺序。

更新

这里是jsfiddle http://fiddle.jshell.net/7QmR5/

Answer 1

如果不想修改html：

$('#pop li').each(function(i, el){
$(this).hover(
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();
    },
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();   
    }
)

})；

Answer 2

您可以按以下方式设置元素的格式

HTML

<li id="1">Item</li>
<div id="info-1"></div>

它允许您执行以下操作

$(".dotdiv > ul > li").hover( function( ) {
    $(".dotdiv > div").hide();
    $("#info-" + $(this).attr("id") ).show();
});

小提琴here