0

我正在尝试根据循环内的屏幕大小调用函数。

该功能在页面加载时工作正常，但是在调整窗口大小时内容不会改变。

这是一个例子： https ://jsfiddle.net/celine305/BaNRq/27/

任何帮助将非常感激。

for (var i = 0; i < 2; i++) {
  function red() {
    $('#' + i + '').css('background', '#B60C0C')
      .text('Screen Size RED');
  }

  function orange() {
    $('#' + i + '').css('background', '#EBAE10')
      .text('Screen Size ORANGE');
  }

  function green() {
    $('#' + i + '').css('background', '#83ba2b')
      .text('Screen Size GREEN');
  }

  var widths = [0, 500, 850];

  function resizeFn() {
    if (window.innerWidth >= widths[0] && window.innerWidth < widths[1]) {
      red();
    } else if (window.innerWidth >= widths[1] && window.innerWidth < widths[2]) {
      orange();
    } else {
      green();
    }
  }
  resizeFn();
  window.onresize = resizeFn();
}
4

3 回答 3

1
  1. 将你的函数移到for循环之外
  2. 将 3 个功能合并为一个
  3. 使用 jQuery 侦听器而不是 JavaScript，因为您已经在使用 jQuery
// You could also assign classes and use $(".className") instead of loop
function changeColor(color) {
    for(var i=0; i<2; i++){
        $('#'+i+'').css('background',color).text('Screen Size' + color);
    }
}

var widths = [0, 500, 850];

function resizeFn() {
    if (window.innerWidth>=widths[0] &&window.innerWidth<widths[1]) {
        changeColor('#B60C0C');
    } else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
        changeColor('#EBAE10');
    } else {
        changeColor('#83ba2b');
    }
}

resizeFn();
$(window).resize(function() {
    console.log("resize");
    resizeFn();
})

JSFiddle 将内容呈现在 a 中div，因此您的代码永远不会检测到调整大小。我添加了一个容器来检测调整大小，否则你应该使用$(window).

小提琴：https ://jsfiddle.net/BaNRq/29/

于 2016-07-21T18:46:58.077 回答
0

如果您想使用当前代码，您可能必须将函数声明移到 for 循环之外。见这篇文章。

不过作为旁注，我建议不要使用 javascript 来处理这些样式更改。CSS 提供了一种很好的方法来处理以媒体查询形式对预定大小进行样式更改。

于 2016-07-21T18:44:39.223 回答
0

循环的重点似乎是选择元素。您可以通过一个查询选择所有元素来更简单地做到这一点：

$("#1, #2")

因为您在循环中执行所有操作，所以您正在重新定义函数并多次分配 resize-function。

哦，顺便说一句，您实际上并没有将函数分配给 window.onresize 事件处理程序，而是函数的返回值。尝试在没有尾括号的情况下分配它。

于 2016-07-21T18:45:28.577 回答