onresize 在循环中似乎不起作用 (javascript)
onresize doesn't seem to work when in a loop (javascript)
我正在尝试在循环中根据屏幕尺寸调用函数'。
该函数在加载页面时工作正常,但是,当 window 调整大小时内容不会改变。
举个例子:
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 循环之外。 See this article.
不过,作为旁注,我建议远离 javascript 来处理这些样式更改。 CSS 提供了一种很好的方法来处理 media queries 形式的预定尺寸的样式更改。
循环的重点似乎是选择元素。您可以通过一次查询选择所有元素来更简单地完成此操作:
$("#1, #2")
因为您在循环中执行所有操作,所以您正在重新定义函数并多次分配调整大小函数。
哦,顺便说一下,您并不是真正将函数分配给 window.onresize 事件处理程序,而是分配给函数的 return 值。尝试在没有尾随大括号的情况下分配它。
- 将函数移出
for
循环
- 将 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/
我正在尝试在循环中根据屏幕尺寸调用函数'。
该函数在加载页面时工作正常,但是,当 window 调整大小时内容不会改变。
举个例子: 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 循环之外。 See this article.
不过,作为旁注,我建议远离 javascript 来处理这些样式更改。 CSS 提供了一种很好的方法来处理 media queries 形式的预定尺寸的样式更改。
循环的重点似乎是选择元素。您可以通过一次查询选择所有元素来更简单地完成此操作:
$("#1, #2")
因为您在循环中执行所有操作,所以您正在重新定义函数并多次分配调整大小函数。
哦,顺便说一下,您并不是真正将函数分配给 window.onresize 事件处理程序,而是分配给函数的 return 值。尝试在没有尾随大括号的情况下分配它。
- 将函数移出
for
循环 - 将 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/