jquery list item per image

Question

我有3个图像和3个项目的无序列表，使用jQuery我怎样才能得到1图像显示在正确的顺序悬停。它很难解释，所以我会给你一些代码

<img src="1.jpg" /> 
<img src="2.jpg" /> 
<img src="3.jpg" /> 

<ul> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">item 2</a></li> 
    <li><a href="#">item 3</a></li> 
</ul> 

，当你将鼠标悬停在项目1，图像1将当你将鼠标悬停在第2项显示，图像2将显示等等...

有什么建议家伙？

Answer 1

你需要改变选择，以确保您不选择无关的元素：

$("ul li").hover(function() { 
    //Hide all the images, then select the nth image, where n is the index of the hovered item, and show it 
    $("img").hide().eq($(this).index()).show(); 
}, 
function() { 
    //On mouseleave, hide all images. 
    $("img").hide(); 
}); 

Answer 2

我建议像下面这样，假设你想要的形象再次隐藏一旦指针移离li：

$('li').hover(
function(){ 
var i = $(this).index('li'); 
$('img').eq(i).show(); 
}, 
function(){ 
var i = $(this).index('li'); 
$('img').eq(i).hide(); 
}); 

JS Fiddle demo。

Answer 3

<div id="images"> 
    <img src="1.jpg" /> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
</div> 

<ul id="list"> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">item 2</a></li> 
    <li><a href="#">item 3</a></li> 
</ul> 

$("#list li").hover(function(){$("images img").eq($(this).index()).fadeToggle();}) 

这会做到这一点。