1

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

上記の方法は問題なく機能しますが、私はまだ学習しているので、関数を繰り返す代わりに、それを行うためのより良い方法があると思います。

誰かが私にここでいくつかの光を与えることができますか？このコードを改善するにはどうすればよいですか？

4

2 に答える 2

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

ただし、この方法では、すべてのリンクが画像関連のリンクであることを確認する必要があります。

于 2010-04-12T21:06:50.923 に答える
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 が設定されます。

于 2010-04-12T21:08:47.253 に答える