1

だから私はmysqlテーブルから来るリストを持っています。例: http://i.imgur.com/MPJSR.png

このリストには、ID を持つ特定のカテゴリが含まれています。カテゴリと画像の間のリンクを取得します。すべての画像に、リスト内のクラスと同じ className を付けました。

(e.g  <a href="#" class="1">Logo</a>  and <img class="1" src="#" />

これをJQueryで書く最良の方法は何ですか?

jQuery コードを少し書き始めましたが、すぐにそれがくだらないことに気付きました。

$(document).ready(function(){    
  $(".1").click(function(event){
    $('img.2').addClass("white");        
    $('img.3').addClass("white");        
    $('img.4').addClass("white");
    $('img.5').addClass("white");     
    $('img.6').addClass("white");
    $('img.7').addClass("white");        
    $('img.8').addClass("white");        
    $('img.9').addClass("white");
    $('img.10').addClass("white");
    $('img.11').addClass("white");
    $('img.12').addClass("white");
    $('img.13').addClass("white");    
   });
});

皆さんへの私の質問は... 100行の醜いコードを書かずにこれを処理する最良の方法は何ですか.

4

2 に答える 2

1

すべての dom 要素に複数のクラスを追加でき、jquery は適切にそれを見つけます。class="1 thumb_imageのように、すべての画像に追加のクラスを割り当てる必要があり、セレクターではなく jqueryclass="2 thumb_imageを使用するだけです。$('.thumb_image:not("1")').addClass("white");

于 2012-11-13T16:47:18.233 に答える
0

質問を正しく理解していれば、これでうまくいくはずです。

<script type="text/javascript">
    $(document).ready(function(){    
      $("#category a").click(function(e){
            e.preventDefault();
            var clicked_class = $(this).attr('class');

        $('img').each( function() {
            var image = $(this);

            if( image.hasClass( clicked_class ) ) {
                image.removeClass( 'white' );
            } else {
                image.addClass( 'white' );
            }

        });


       });
    });
</script>

まず、クリック イベントを#categorydiv 内のアンカーに追加します。それらがクリックされると、クリックされたアンカーのクラスを取得し、そのクラスを使用して各画像と比較します。画像がそのクラスを共有している場合は、そのクラスで更新します。それ以外の場合は、前のアクションで追加されたクラスwhiteを削除します。white

于 2012-11-13T18:39:37.273 に答える