onresize不'在循环中似乎不起作用(javascript）

onresize doesn't seem to work when in a loop (javascript)

本文关键字：不起作用 javascript 循环 onresize      更新时间：2023-09-26

我正试图根据循环中的屏幕大小来调用一个函数。

加载页面时，该函数运行良好，但调整窗口大小时，内容不会更改。

以下是一个示例：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();
}
  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在div中呈现内容，因此您的代码从未检测到大小调整。我添加了一个容器来检测大小调整，但除此之外，您应该使用$(window)

Fiddle：https://jsfiddle.net/BaNRq/29/

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

$("#1, #2")

因为你在循环中做所有的事情，你正在重新定义函数，并多次分配resize函数。

哦，顺便说一句，您并不是真正将函数分配给window.onresize事件处理程序，而是函数的返回值。尝试在不使用大括号的情况下分配它。

如果要使用当前代码，可能需要将函数声明移到for循环之外。请参阅本文。

不过，作为一个附带说明，我建议不要使用javascript来处理这些样式更改。CSS以媒体查询的形式提供了一种很好的方式来处理预定大小的样式更改。

相关文章：