Question

我在网站上添加了this script，以便根据背景图片动态改变文字颜色。

我目前正在ready（）上执行调用，其中包含以下文档代码：

$(document).ready(){
  BackgroundCheck.init({
    targets: '.target',
    images: '.thumbnails'
  });
});

和脚本，实际上将一个特定的css类添加到具有类＆＃34;缩略图＆＃34;

的对象

我的问题是，我不希望在窗口宽度低于768px时执行此代码，无论是在加载页面期间，还是在此值下调整窗口大小。

我想到了这段代码：

$(document).ready(){
   if(window.width() > 768 )
   {
      BackgroundCheck.init({
        targets: '.target',
        images: '.thumbnails'
      });
   }
});

但它只在第一次加载时被触发....相反，我需要这个脚本在窗口宽度为768px的 ANY 情况下没有效果，并且在 ANY中有HAS效果案例超过768px。

拜托，我该怎么办？谢谢。

Answer 1

这是你想要的吗？

window.resize仅在您调整窗口大小时触发，因此...您需要在加载页面时手动触发脚本。

执行此操作的最佳方法是将代码包装在一个小函数中并触发一次（见下文），然后将resize事件附加到同一个函数中，然后瞧。

http://jsfiddle.net/NKLd5/2/

// same as doc.ready, i prefer this over $(document).ready
$(function() {
    // variables ftw!
    var win = $(window);

    // fire it once on document.ready
    resizeHandler();

    // Fires on every resize   
    win.resize(resizeHandler);

    function resizeHandler() {
        if (win.width() >= 768) {
            BackgroundCheck.init({
                // etc
            });
        }
    }
});

如果您只想触发一次脚本，则可以设置一个在脚本第一次触发时设置为true的布尔值。

然后在调整大小处理程序

    var fired = false;
    ...

    function resizeHandler() {
        if (win.width() >= 768 && !fired) {
            fired = true;
            ...

MediaQueries

如果你只是使用js来添加类，你应该使用mediaqueries，除非你正在做一些复杂的事情。

/* applies this css to all elements with the .targets and .thumnails classes */
/* Everything below 768px */
@media all and (max-width: 767px) {
    .targets {
        background: blue;
    }
    .thumbnails {
        background: blue;
    }
}
/* everything > 768px */
@media all and (min-width: 768px) {
    .targets {
        background: red;
    }
    .thumbnails {
        background: red;
    }
}

Answer 2

也把它扔进去：

$( window ).resize(function() {
  if(window.width() > 768 )
   {
      BackgroundCheck.init({
        targets: '.target',
        images: '.thumbnails'
      });
   }
   else{
      //You probably want to do something here...
   }
});

Answer 3

你可以选择

$(window).resize(function() {
    if($(window).width() > 768 ) {
        // DO SOMETHING HERE
        alert();
    }
});
$(document).ready(function() {
   if($(window).width() > 768 ) {
        // DO SOMETHING HERE
        alert();
    } 
});

http://jsfiddle.net/aD69D/

仅在特定宽度的窗口上执行jQuery函数（甚至调整大小）

3 个答案:

MediaQueries