jQuery選択的に推移

Question

ようにしているかの簡単なタjQuery:私には言葉のリストが推移し、fadeInそれに対応するイメージです。例えば:

<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 います。

通常は必要ないかもしれませんが、利用データカラーカスタム属性ですが思うがますます重要になっていく。、使用する属性。できるようなコードなどの

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

これは、画像に対応する各リンクに固有のIDを設定します。