элемент списка jquery для каждого изображения

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

Я бы предложил что-то вроде следующего, предполагая, что вы хотите, чтобы изображение снова скрылось, как только указатель сместится с 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 2

Вам необходимо изменить селекторы, чтобы убедиться, что вы не выбрали непреднамеренные элементы:

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

Вот и все.