2

我有这个代码，以便每个元素在完成后产生滚动效果：我不断重复每个元素的功能，问题是要添加 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
    });
4

7 回答 7

2

我会使用：

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

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

于 2013-09-03T22:25:11.583 回答
0

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

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

于 2013-09-03T22:10:24.527 回答
0

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'));
于 2013-09-03T22:12:34.753 回答
0

试试下面的代码：

$(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);
            }
}
于 2013-09-03T22:13:32.773 回答
0

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

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'
     });
 });
于 2013-09-03T22:17:24.233 回答
0

您可以将类列表传递给 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");
        }
    });
});

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

于 2013-09-03T22:21:56.063 回答
0

下面怎么样，其中规则对象中的键是要添加的类，值是要获取类的项目的选择器： 

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);
            }
        });
    });
});
于 2013-09-03T22:25:36.100 回答