在IE8中,显示/隐藏拇指网格非常慢.

我有一个拇指,每个拇指都带有一个category属性,并且有一些切换来显示不同的类别.下面的代码可以处理显示/隐藏的提示,但这在IE中非常慢,有时会引发“脚本很慢”警告.我猜没有必要声明它在所有其他浏览器中都能很好地运行.

我的问题是：您可以提供一些性能提示吗？甚至可能暗示a将该位重写为纯Javascript是否有意义？

$('#cat-tab .categories-list a').live('click', function() {
        var $this = $(this);
        var $target = $('#cat-tab .video-results');
        var $text = $.trim($('span', $this).text());
        $scroll = $(window).scrollTop();

        $('#cat-tab .categories-list a').removeClass('active');
        $this.addClass('active');

        $('#cat-tab .video-results .channel').removeClass('hidden');
        if($text != 'All') {
            $('#cat-tab .video-results .channel[rel!="'+$text+'"]').addClass('hidden');
        }
        $.rePage(true);

        return false;
    });

解决方法:

与其费力地从脚本中查找和隐藏每个单独的thumb元素,不如利用样式表为您完成工作：

#categories .channel { display: none; }
#categories.category-all .channel { display: block; }
#categories.category-1 .channel-1 { display: block; }
#categories.category-2 .channel-2 { display: block; }
#categories.category-3 .channel-3 { display: block; }
#categories.category-4 .channel-4 { display: block; }

现在,您只需设置祖先#categories元素的className即可,并且根据其是否具有与该类别匹配的类,显示/隐藏其中的所有缩略图.