javascript - 是否可以更有效地重写此jQueryJjavaScript代码段？

我正在尝试更有效地编写此代码。我已经尝试了25种不同的排列，但似乎只能打破它。

基本上，我将各种类添加到元素中，以在窗口宽度为1025px或更大时触发css / keyframes动画。

然后，当小于1024px时将添加另一个类，该类旨在显示不带元素的元素。

<script  type="text/javascript">
    var width = $(window).width();
    if(width >= 1025) {
    $(window).scroll(function() {
        $('#about .image img.flex').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("slideLeft"); }
        });
        $('#author .image img.flex').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("slideRight"); }
        });
        $('#feed .blog_01').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("oneUp"); }
        });
        $('#feed .blog_02').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("twoUp"); }
        });
        $('#feed .blog_03').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+600) { $(this).addClass("thrUp"); }
        });
        $('#feed .more').each(function() {
            var position = $(this).offset().top;
            var top = $(window).scrollTop();
            if (position < top+1000) { $(this).addClass("moreUp"); }
        });
    });
}
else {
    $('#about .image img.flex').addClass('visible');
    $('#author .image img.flex').addClass('visible');
    $('#feed .blog_01').addClass('visible');
    $('#feed .blog_02').addClass('visible');
    $('#feed .blog_03').addClass('visible');
    $('#feed .more').addClass('visible');
    }
</script>

编辑

像这样可视化可能会更好：

也许最好说一下如何使这部分更有效...

var width = $(window).width();
    if(width >= 1025) {
    $(window).scroll(function() {
    $('#about .image img.flex').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("slideLeft"); }
    });
    $('#author .image img.flex').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("slideRight"); }
    });
    $('#feed .blog_01').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("oneUp"); }
    });
    $('#feed .blog_02').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("twoUp"); }
    });
    $('#feed .blog_03').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+600) { $(this).addClass("thrUp"); }
    });
    $('#feed .more').each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        if (position < top+1000) { $(this).addClass("moreUp"); }
    });'

最佳答案

@icicleking的答案看起来不错，但是如果您需要保留addClasses，则可以遍历重要的值。

DEMO

var width = $(window).width();

// Make an array of data objects
var data = [
  { el: '#about .image img.flex', plus: 600, newClass: "slideLeft" },
  { el: '#author .image img.flex', plus: 600, newClass: "slideRight" },
  { el: '#feed .blog_01', plus: 600, newClass: "oneUp" },
  { el: '#feed .blog_02', plus: 600, newClass: "twoUp" },
  { el: '#feed .blog_03', plus: 600, newClass: "thrUp" },
  { el: '#feed .more', plus: 1000, newClass: "moreUp" }
];

if(width >= 1025) {
  $(window).scroll(function() {
    // Loop over the array of data objects
    data.forEach(function(d) {
      // For each object, target the el attribute for more looping...
      $(d.el).each(function() {
        var position = $(this).offset().top;
        var top = $(window).scrollTop();
        // ...use the plus attribute in this condition...
        if (position < (top + d.plus)) {
          // ...and add the newClass attribute
          $(this).addClass(d.newClass); }
      });
    });
  });
} else {
  data.forEach(function(d) {
    $(d.el).addClass('visible');
  });
}

关于javascript - 是否可以更有效地重写此jQueryJjavaScript代码段？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46612511/