1

我正在一个响应式网站上工作，并且有几个特定的​​功能我需要在窗口调整大小的某些点触发：当窗口达到定义的“移动宽度”时，当它达到定义的“桌面”宽度时，以及当它达到任何宽度时在指定的数字数组（我的 CSS 断点）中。

这是一个精简的小提琴，显示了我在哪里（所有附加的段落元素都是我的函数将去哪里的占位符）：http: //jsfiddle.net/ygwug/

正如您通过调整窗口大小看到的那样，我已经让移动/桌面检查工作了，但是断点检查器不起作用。具体与此相关的代码如下：

var breakpoints = [320, 480, 550, 650, 720, 790, 1000, 1190];
    window_w = $wind.width();

var breakpointHit = function() {
    $('body').append("<p>Breakpoint was hit!</p>");
}

if ( $.inArray( window_w, breakpoints ) > -1 ) {
    breakpointHit();
}

据我了解，如果数组中不存在该值，则 $.inArray 应返回 -1，如果存在则返回该值的索引，这就是为什么我使用 "> -1" 来确定该值是否存在于数组。但是由于我在开发工具中没有看到任何语法错误，所以我的逻辑中一定有错误。

如果有人能帮助我指出正确的方向，我将不胜感激。谢谢！

4

1 回答 1

3

检查你原来的 jFiddle 这个修改：http: //jsfiddle.net/hKRrm/1/

我改变了什么：

  • 将断点测试移动到窗口调整大小
  • 允许breakpointHit接受被命中的断点
  • 修改你的断点测试，使其window_w < breakpoint尽可能符合预期（==永远不会让你到任何地方）
  • 添加当前断点的缓存以防止它多次触发
  • 将mobileCheck调用移到breakpointHit它应该在的函数中。我的意思是您只想检查是否在遇到断点时是否在移动设备上，而不是一直。

这可能会或可能不会回答您的问题，但这就是我将您的问题解释为要求的内容。

于 2013-04-07T05:14:36.827 回答