javascript - 简化功能，使代码不会变得太大

Question

我有这段代码，以便每个元素在完成时产生滚动效果: 我不断地对每个元素重复这个函数，问题是要添加30个不同类的元素，代码会非常大。

jQuery:

  $(window).scroll(function () {
        $('.regalos').each(function () {
            var imagePos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow + 400) {
                $(this).addClass("stretchLeft");
            }
        });

        $('.sprite-Layer-2').each(function () {
            var imagePos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow + 400) {
                $(this).addClass("slideLeft");
            }
        });
       // ... must 28
    });

Answer 1

我会使用:

$(window).scroll(function () {
    var topOfWindow = $(window).scrollTop();

    function _checkOffset(className) {
        return function () {
            var $this = $(this),
                imagePos = $this.offset().top;

            $this.toggleClass(className, (imagePos < topOfWindow + 400));
        };
    }

    $('.regalos').each(_checkOffset('stretchLeft'));
    $('.sprite-Layer-2').each(_checkOffset('slideLeft'));
});

但是，您最好重新考虑您的结构，以避免根据偏移量添加不同的类名。