1

所以我有一个来自 mysql 表的列表。示例：http: //i.imgur.com/MPJSR.png

此列表包含具有 ID 的某些类别。获取类别和图像之间的链接。我为每个图像赋予了与列表 ex 中的类相同的类名。

(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，class="2 thumb_image然后只需使用jquery 而不是选择器：$('.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 回答