使用enquire.js更好地理解jquery

我目前正在努力提高对jQuery的总体理解，我认为有一个问题可以帮助我实现这一目标。我正在研究如何提高网站的响应能力

以下是（简化的）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>

在这里，我使用waypoint.js通过更改类来触发SVG图像上的CSS转换——一切都是通过CSS逐步完成的

对于较大的屏幕，CSS在

.closed

上隐藏文本（

.text

），并在单击

文章

时显示（将类更改为

.open

）以及触发动画

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

这就是我对jQuery的理解需要改进的地方！我知道我可以将这些jQuery对象与inquire.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
    }

  });

});

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

更新： 努力但失败

认为

.bind

/

.unbind

可能会起作用。最初在click事件上测试了此功能，但不起作用。我做错了。以下功能适用于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');
  }
});

---

很快就到了！

好吧，我并没有像我所希望的那样提高我对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');
    }

  });

});

绑定

/

解除绑定

单击事件，然后

航路点（'destroy'）

完成了该操作！：D

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

  });

});