画像ごとのjqueryリスト項目

Question

3つの画像と3つの項目の順序付けられていないリストがjQueryを使用しています。どのようにして1つの画像をホバーの正しい順序で表示することができますか？私はあなたが項目1にカーソルを合わせると、画像1は、あなたが項目2にカーソルを合わせると、画像2が表示され、ように...

表示されますいくつかのコード

<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> 

をあげる説明するために、そのハード

提案はありますか？

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

を。