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

ただし、オフセットに基づいて異なるクラス名を追加しないように、構造を再考する方がよい場合があります。

Answer 2

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

Answer 3

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

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