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'));
});

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

Answer 2

您可以创建键/值对的HashMap（key = ID / Class，value = .addClass（）中的字符串）。但是，这只有在你只想通过addClass为你拥有的每个键添加一个类时才有效。

或者你可以有一个复杂的HashMap，其中值是一个数组，如果你真的想要进一步迭代它......

Answer 3

1，创建一次函数：

var myfunction = function(that, whichway) {
     var imagePos = $(that).offset().top;

     var topOfWindow = $(window).scrollTop();
     if (imagePos < topOfWindow + 400) {
       $(that).addClass(whichway); }
     };

然后按照您的喜好随时调用它：

$('.regalos').each(myfunction(this, 'stretchLeft'));
$('.sprite-layer-2').each(myfunction(this, 'slideLeft'));

Answer 4

尝试下面的代码：

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

$('.regalos').each(function () {
foo(this, 'stretchLeft');
});

$('.sprite-Layer-2').each(function () {
foo(this, 'slideleft');
});

});

function foo(that, classToBeAdded){
var imagePos = $(that).offset().top;

            if (imagePos < topOfWindow + 400) {
                $(that).addClass(classToBeAdded);
            }
}

Answer 5

您可以使用类似的东西作为全局函数，并通过项目传递数组。

var fn = function(args) {
     for (var i = 0; i < args.elements.length; i++) {
         var el = args.elements[i];
         $(el).each(function() {
             var imagePos = $(this).offset().top;
             var topOfWindow = $(window).scrollTop();
             if (imagePos < topOfWindow + 400) {
                 $(this).addClass(args.cls);
             }
         });
     }

 };
 $(window).scroll(function() {
     fn({
         elements: ['.regalos', '.sprite-layer-2']
         cls: 'stretchLeft'
     });
 });

Answer 6

您可以将类列表传递给jQuery选择器。

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

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

但是，我会为所有元素添加一个类并通过它访问它们。

Answer 7

以下内容如何，其中rules对象中的键是要添加的类，值是获取类的项的选择器：

var rules = {
    "slideLeft": ".sprite-Layer-2",
    "stretchLeft": ".regalos",
    "someOtherClass" : ".abc, .def, .ghi"    // Multiple elements get this class
};

$(window).scroll(function () {

    $.each(rules, function( className, selector) {
        $(selector).each(function () {
            var imagePos = $(this).offset().top;

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

简化功能，使代码不会太大

7 个答案: