Question

我目前正在努力提高我对jQuery的整体理解，并且遇到一个我认为可以帮助我实现这一目标的问题。我正在调查enquire.js以增强自适应网站。

以下是详细介绍公司服务的小部分的（简化）html：

<section id="services">
  <article id="services-coaching" class="closed">
    <div class="image">
      <?php include("library/images/service-coaching.svg"); ?>
      <div class="fallback">
    </div>
    <div class="text">
      <?php the_content(); ?>
    </div>
  </article>
  <article id="services-workshops" class="closed">
    <div class="image">
      <?php include("library/images/service-workshops.svg"); ?>
      <div class="fallback">
    </div>
    <div class="text">
      <?php the_content(); ?>
    </div>
  </article>
  <article id="services-courses" class="closed">
    <div class="image">
      <?php include("library/images/service-courses.svg"); ?>
      <div class="fallback">
    </div>
    <div class="text">
      <?php the_content(); ?>
    </div>
  </article>
</section>

jQuery用于屏幕小于 47em：

// Services - mobile
    $('#services-coaching, #services-workshops, #services-courses').waypoint(function(direction) {
        if (direction === 'down') {
          $(this).addClass('open').removeClass('closed');
        }
        else {
          $(this).addClass('closed').removeClass('open');
        }
    }, { offset: 100 });

这里我使用waypoint.js通过更改类来触发SVG图像上的CSS转换 - 所有内容都是通过CSS逐步完成的。

对于较大的屏幕，CSS会隐藏.text上的文字（.closed）并在点击article时将其显示（将班级更改为.open）以及触发动画。

// Services - large screen 
$('#services article').click(function() {
    $(this).addClass('open').removeClass('closed');
});

这是我对jQuery的理解需要改进的地方！我知道我可以将这些jQuery对象与enquire.js一起使用，根据屏幕大小基本匹配和取消它们，如下所示：

jQuery(document).ready(function($) {

  enquire.register("screen and (min-width: 47.0625em)", function() {

    match : function() {
        // enable 'waypoint' jQuery object
        // disable 'click' jQuery object
    },
    unmatch : function() {
        // disable 'waypoint' jQuery object
        // enable 'click' jQuery object
    }

  });

});

但我不知道如何最好地创建对象，以便以这种方式使用它们。我开始寻找into jQuery fundamentals，但它没有帮助我:(

更新 ~~尝试但失败~~

思考.bind / .unbind可能有用。最初在click事件上测试了这个，但~~不起作用~~ 我做错了。以下是点击作品：

enquire.register("screen and (min-width: 47.0625em)", {
  match : function() {
    $('#services article').bind('click', function() {
      $(this).addClass('open').removeClass('closed');
    });    
  },
  unmatch : function () {
    $('#services article').unbind('click');
  }
});

去那儿！

Answer 1

好的，所以我没有像我所希望的那样提高对jQuery对象和函数的理解，但是我已经解决了这个特殊问题并且正在工作。

我的主要问题是，在调整窗口大小后，“航点”和“点击”功能都处于活动状态。我知道解决方案是取消每个不需要但我不知道怎么做的解决方案。我现在做...

jQuery(document).ready(function($) {

  enquire.register("screen and (max-width: 47em)", {

    match : function() {
      $('#services-coaching, #services-workshops, #services-courses').waypoint(function(direction) {
          if (direction === 'down') {
            $(this).addClass('open').removeClass('closed');
          }
          else {
            $(this).addClass('closed').removeClass('open');
          }
      }, { offset: '50%' });
    },
    unmatch : function () {
      $('#services-coaching, #services-workshops, #services-courses').waypoint('destroy');
    }
  });

  enquire.register("screen and (min-width: 47.0625em)", {

    match : function() {
      $('#services article').removeClass('open');
      $('#services article').bind('click', function() {
        $(this).addClass('open').removeClass('closed');
      });
    },
    unmatch : function () {
      $('#services article').unbind('click');
    }

  });

});

bind / unbind点击事件，waypoint('destroy')就可以了！：d

用enquire.js更好地理解jquery

1 个答案: