3

我目前正在尝试提高我对 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
    }

  });

});

但我不知道如何最好地创建对象以便可以以这种方式使用它们。我开始研究jQuery 基础知识，但它没有帮助我:(

更新： 尝试但失败

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

到达那里！

4

1 回答 1

1

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

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

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

于 2013-08-01T11:50:31.330 回答