Question

我有一个大约300 div打开的页面，我切换他们的CSS，所以他们要么100％宽，要么说200像素。当我只有10个左右的div时，我的功能才能找到，但是现在有这么多，我的功能似乎崩溃了。

有人可以解释为什么会发生这种情况或“增强”我目前的功能吗？

$('.grid').click(function () {
            $('.vacancy').animate({ opacity: 0 }, 500, function () {
                $(".vacancy").switchClass("listview", "gridview", 100);
                $(".vacancy").stop().animate({ opacity: 1 }, 500);
                $('a.gridView').removeClass('grid-active');
                $('a.listView').addClass('list-active');
            });
            return false;
});

$('.list').click(function () {
            $('.vacancy').animate({ opacity: 0 }, 500, function () {
                $(".vacancy").switchClass("gridview", "listview", 100);
                $(".vacancy").stop().animate({ opacity: 1 }, 500);
                $('a.gridView').removeClass('grid-active');
                $('a.listView').addClass('list-active');
            });
            return false;
});

Answer 1

回调函数会为每个动画元素触发。

如果您有300个.vacancy div，则回调将执行300次。每次回调执行时，将为300个元素调用$(".vacancy").switchClass()。 300 x 300很多......

您可以在回调中使用this开始：

$('.grid').click(function () {
        $('.vacancy').animate({ opacity: 0 }, 500, function () {
            $(this).switchClass("listview", "gridview", 100);
            $(this).stop().animate({ opacity: 1 }, 500);
            $('a.gridView').removeClass('grid-active');
            $('a.listView').addClass('list-active');
        });
        return false;
});

你需要一些其他方法来减少调用其他两行的次数，但是没有html，我不能说解决方案是什么。

这是演示文稿的小提琴：http://jsfiddle.net/jkcY3/

$.fn.logMe = function() {
    return this.each(function() {
        console.log('logMe called', this); 
    });
};

$('.vacancy').animate({ opacity: 0 }, 500, function() {
   $('.vacancy').logMe();
});

如果我有300个div，我会拨打90000来logMe();

函数因为jQuery的迭代次数而崩溃

1 个答案: