![](/img/trans.png)
[英]Javascript window.onresize doesn't seem to provide more than one update?
[英]onresize doesn't seem to work when in a loop (javascript)
我正在尝试根据循环内的屏幕大小调用函数。
加载页面时,该功能运行良好,但是,调整窗口大小时,内容不会更改。
这是一个示例: 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();
}
for
循环 // 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)
。
小提琴: https : //jsfiddle.net/BaNRq/29/
循环的重点似乎是选择元素。 您可以通过一个查询选择所有元素来简化此操作:
$("#1, #2")
因为您在循环中正在做所有事情,所以您正在重新定义函数并多次分配调整大小函数。
哦,顺便说一句,您并不是真正将一个函数分配给window.onresize事件处理程序,而是一个函数的返回值。 尝试分配时不要使用大括号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.