更好地理解jquery与enquire.js

我目前正在努力提高我对jQuery的总体理解，并有一个问题，我认为这将帮助我实现这一点。我正在调查enquire.js以增强响应网站。更好地理解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 });

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

对于大屏幕的CSS隐藏的上.closed文本（.text），并揭示了它在单击时article（改变类.open）以及触发动画。

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

这是我对jQuery的理解需要改进的地方！我知道我可以使用这些jQuery的对象与enquire.js基本上匹配和UNMATCH他们根据屏幕大小，这样的事情：

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可能工作在最初的单击事件测试这一点，但 ~~不工作~~ 我做错了继作品点击：

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

到达那里！

来源

2013-08-01 Mr Jonny Wood

好的，所以我没有改善我对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 click事件和waypoint('destroy')的伎俩！：D

来源

2013-08-01 11:50:31

更好地理解jquery与enquire.js

回答

相关问题