在同一个类JQUERY的不同时间触发事件

Question

请建议在标题中进行编辑，因为我无法理解我应该如何命名。

这是HTML：

<div class='portfolio'>
      <h2 class='mainheading'>
        Recent From
        <span class='welcome-heading'>Portfolio</span>
      </h2>
      <hr>
      <div class='portfolio-row'>
        <div class='flip-container portfolio-for-transition jstransitionportfolio1' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-1'></div>
            <div class='back back-1'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio2' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-2'></div>
            <div class='back back-2'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio3' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-3'></div>
            <div class='back back-3'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio4' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-4'></div>
            <div class='back back-4'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio5' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-5'></div>
            <div class='back back-5'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio6' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-6'></div>
            <div class='back back-6'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio7' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-7'></div>
            <div class='back back-7'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio8' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-8'></div>
            <div class='back back-8'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio9' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-9'></div>
            <div class='back back-9'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio10' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-10'></div>
            <div class='back back-10'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio11' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-11'></div>
            <div class='back back-11'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio12' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-12'></div>
            <div class='back back-12'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio13' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-13'></div>
            <div class='back back-13'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio14' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-14'></div>
            <div class='back back-14'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio15' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-15'></div>
            <div class='back back-15'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
        <div class='flip-container portfolio-for-transition jstransitionportfolio16' ontouchstart="this.classList.toggle('hover');">
          <div class='flipper'>
            <div class='front front-16'></div>
            <div class='back back-16'>
              <p>Some Portfolio Website</p>
              <a href=''>Visit</a>
            </div>
          </div>
        </div>
      </div>
    </div>

这是JQuery：

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

  if(xScroll > $('.our-services-item1').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item1').addClass('is-showing-our-services');
        },150);
    };
  var yScroll = $(this).scrollTop();

  if(yScroll > $('.our-services-item2').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item2').addClass('is-showing-our-services');
        },150);
    };
  var aScroll = $(this).scrollTop();

  if(aScroll > $('.our-services-item3').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item3').addClass('is-showing-our-services');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.our-services-item4').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.our-services-item4').addClass('is-showing-our-services');
        },150);
    };

  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio1').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio1').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio2').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio2').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio3').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio3').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio4').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio4').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio5').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio5').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio6').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio6').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio7').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio7').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio8').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio8').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio9').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio9').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio10').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio10').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio11').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio11').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio12').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio12').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio13').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio13').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio14').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio14').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio15').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio15').addClass('is-showing-jstransitionportfolio');
        },150);
    };
  var zScroll = $(this).scrollTop();

  if(zScroll > $('.jstransitionportfolio16').offset().top - ($(window).height() / 1.2)) {
        setTimeout(function(){
        $('.jstransitionportfolio16').addClass('is-showing-jstransitionportfolio');
        },150);
    };

正如你可以看到这些东西是同一个类，但是我必须以不同的方式命名它们，因此不会为同一个类的每个元素触发触发器，因此我将它们命名为jstransitionportfolio [1-16]。但它增加了我的脚本时间。我想在单个函数中将它们组合起来，这样可以减少我的脚本时间，而且我不会有很多类，我的代码会更清晰，更好。请帮忙！

Answer 1

您的代码可以简化：

.some-class

您只需将some-other-class和onScroll更改为您选择的某个班级名称。

附注：向{{1}}侦听器添加内容时请小心，因为它会降低滚动速度，从而降低用户体验。

Answer 2

在使用此功能之前，请从我们的服务项和 jstransitionportfolio 类中删除这些数字。您可以查看 demo here

var setHeight=$(window).height() / 1.2;
var ourServices=$('.our-services-item');
var tranPortfolio=$('.jstransitionportfolio');

$(window).on('scroll',function(){

  var xScroll = $(this).scrollTop();

  ourServices.each(function(){
     var el=$(this);
     if(xScroll>(el.offset().top-setHeight))
      setTimeout(function(){el.addClass('is-showing-our-services')},150);
  });

  tranPortfolio.each(function(){
     var el=$(this);
     if(xScroll>(el.offset().top-setHeight))
      setTimeout(function(){el.addClass('is-showing-jstransitionportfolio')},150);
  });

});