文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >在同一类JQUERY的不同时间触发事件。

问在同一类JQUERY的不同时间触发事件。
EN

Stack Overflow用户
提问于 2016-02-15 12:23:26
回答 2查看 86关注 0票数 0

请建议编辑在标题，因为我无法理解，我应该命名它。

下面是HTML：

代码语言：javascript
运行
复制
<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：

代码语言：javascript
运行
复制
$(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);
    };

正如您所看到的，这些东西属于同一个类，但我必须将它们命名为不同的类，这样就不会为同一个类的每个元素触发触发器，所以我将它们命名为jstrasitionPortfolio1-16。但它增加了我的剧本时间。我希望将它们合并到单个函数中，这样可以减少我的脚本时间，而且我不会有太多的类，我的代码也会更干净更好。请帮帮我！

jquery
html
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-15 12:45:05

您的代码可以简化：

代码语言：javascript
运行
复制
$(window).scroll(function() {
    var xScroll = $(this).scrollTop();

    $(".some-class").each(function() {
        var that = this;
        if(xScroll > $(that).offset().top - ($(window).height() / 1.2)) {
            setTimeout(function(){
                $(that).addClass('some-other-class');
            },150);
        }
    });
});

您只需将.some-class和some-other-class更改为您选择的某个类名即可。

附带注意:当向onScroll监听器添加内容时，请小心，这样会减慢滚动速度，从而降低用户体验。

票数 2
EN

Stack Overflow用户

发布于 2016-02-15 13:06:57

在使用此函数之前，从our-services-item和jstransitionportfolio类中删除数字。您可以检查这里的演示

代码语言：javascript
运行
复制
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);
  });

});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35409312

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档