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();}) 

這會做到這一點。