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

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

まず、関数を一度作成します。

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 に答える