1

5つの画像の水平メニューがあります。これらの5つの画像はすべて、アクティブで灰色の状態になっています。特定の画像がアクティブな場合、残りの4つはグレー表示にする必要があります。他の画像についても同様です。

私はjqueryでそれを行いましたが、コードもそれほど最適化されておらず、優れていません。こんな感じです

    $("document").ready(function(){
  $("#imageidone").click(function() {
         $("#imageidone").attr("src","/path to image_active");
         $("#imageidtwo").attr("src","/path to image_grayed");
         $("#imageidthree").attr("src","/path to image_grayed");
         $("#imageidfour").attr("src","/path to image_grayed");
         $("#imageidfive").attr("src","/path to image_grayed");
   });
      $("#imageidtwo").click(function() {
        $("#imageidone").attr("src","/path to image_grayed");
        $("#imageidtwo").attr("src","/path to image_active");
        $("#imageidthree").attr("src","/path to image_grayed");
        $("#imageidfour").attr("src","/path to image_grayed");
        $("#imageidfive").attr("src","/path to image_grayed"); });
and so on for imageidthree, imageidfour, imageidfive
     });

CSSスプライトまたはよりコンパクトなjqueryishの方法を使用して、より良い方法でそれを行うにはどうすればよいですか？

ありがとうございました

4

2 に答える 2

0

ループを使用します。

var all = ['#imageidone', '#imageidtwo', '#imageidthree', '#imageidfour', '#imageidfive'];

$.each(all, function(selector, idx) {
    $(selector).click(function() {
        $(all.join()).attr('src', '/path to image_grayed');

        $(selector).attr('src', '/path to image_active');
    });
});
于 2011-02-20T07:54:53.697 に答える
0

あなたはCSSスプライトを行うことができます、

すべての状態で大きな画像を作成し、css でクラスを作成し、jquery を使用してクラス名を変更できます。

常に 1 つのイメージのみをロードするため、パフォーマンスが向上します。

于 2011-02-20T07:55:19.207 に答える