JQuery селективный наведение

Question

Я пытаюсь выполнить простую задачу с помощью jQuery: у меня есть список слов, которые при наведении должны исчезнуть в соответствующем изображении. Например:

<a href="#" class="yellow">Yellow</a>
<a href="#" class="blue">Blue</a>
<a href="#" class="green">Green</a>

<img src="yellow.jpg" class="yellow">
<img src="blue.jpg" class="blue">
<img src="green.jpg" class="green">

В настоящее время я делаю это для каждой ссылки / изображения:

$('a.yellow').hover(
  function () {
    $('img.yellow').fadeIn('fast');
    },
    function () {
     $('img.yellow').fadeOut('fast');
     });

Метод, описанный выше, работает нормально, но, поскольку я все еще учусь, я думаю, что есть лучший способ сделать это вместо повторения функций.

Кто-нибудь может дать мне немного света здесь? Как я могу улучшить этот код?

Answer 1

<a href="#" class="yellow" data-type="color">Yellow</a>
<a href="#" class="blue" data-type="color">Blue</a>
<a href="#" class="green" data-type="color">Green</a>

Код jQuery

$('a[data-type=color]').hover(
  function () {
    $('img.'+$(this).attr("class")).fadeIn('fast');
    },
    function () {
     $('img.'+$(this).attr("class")).fadeOut('fast');
     });
});

Я думаю, тебе стоит попробовать это. Я использовал data- в качестве префикса для пользовательских атрибутов, потому что он совместим с html5. Вы можете сказать data-something, если хотите.

Обычно вам может не понадобиться использовать пользовательский атрибут data-color, но, поскольку я думаю, чтобы сделать его более общим, я использовал этот атрибут. Вы также можете сделать такой код:

<a href="#" class="yellow">Yellow</a>
<a href="#" class="blue">Blue</a>
<a href="#" class="green">Green</a>

Тогда

$('a').hover(
  function () {
    $('img.'+$(this).attr("class")).fadeIn('fast');
    },
    function () {
     $('img.'+$(this).attr("class")).fadeOut('fast');
     });
});

Но, таким образом, вы должны убедиться, что все ссылки являются связанными с изображениями ссылками.

Answer 2

<a href="#" id="yellow" class="colorLink">Yellow</a>
<a href="#" id="blue" class="colorLink">Blue</a>
<a href="#" id="green" class="colorLink">Green</a>

<img src="yellow.jpg" class="yellow">
<img src="blue.jpg" class="blue">
<img src="green.jpg" class="green">

$("a.colorLink").hover(
    function(){
        $("img."+this.id).fadeIn('fast');
    },
    function(){
        $("img."+this.id).fadeOut('fast');
    }
);

Устанавливает уникальный идентификатор для каждой ссылки, соответствующей изображению.