函数仅适用于使用.each函数的最后一个div

Question

我见过类似的情况，但我似乎不知道我的情况如何。

所以我得到了3个不同的div，它们都有相同的"显示框"类。我想做的是将我的函数应用于所有3个div。目前，它只应用最后一个分区的函数。

$(".display-boxes").each(function() {
var boxList = $(this).context;
function resizeTeasersTablet(teaserNumber, teaserCollection) {
if (teaserNumber == 1) {
teaserCollection[0].style.width = '73.834%';
teaserCollection[0].style.margin = '0 auto 40px';
for (let i = 1; i < teaserNumber; i++) {
teaserCollection[i].style.width = '25%';
}
} else if (teaserNumber == 2) {
for (let i = 0; i < teaserNumber; i++) {
teaserCollection[i].style.width = '50%';
}
} else if (teaserNumber == 4) {
for (let i = 0; i < teaserNumber; i++) {
teaserCollection[i].style.width = '50%';
}
} else if (teaserNumber == 5) {
for (let i = 0; i < teaserNumber; i++) {
teaserCollection[i].style.width = '50%';
}
} else if (teaserNumber == 3) {
for (let i = 0; i < teaserNumber; i++) {
teaserCollection[i].style.width = '33.33%';
}
}
}
function resizeTeasersMobile(teaserNumber, teaserCollection) {
for (let i = 0; i < teaserNumber; i++) {
teaserCollection[i].style.width = '100%';
}
}
document.addEventListener('DOMContentLoaded', function() {
if (window.innerWidth > 2024) {
displayTeasers(boxList.childElementCount, boxList.children);
} else if (window.innerWidth > 641) {
resizeTeasersTablet(boxList.childElementCount, boxList.children);
} else {
resizeTeasersMobile(boxList.childElementCount, boxList.children);
}
});
window.onresize = function() {
if (window.innerWidth > 2024) {
displayTeasers(boxList.childElementCount, boxList.children);
} else if (window.innerWidth > 641) {
resizeTeasersTablet(boxList.childElementCount, boxList.children);
} else {
resizeTeasersMobile(boxList.childElementCount, boxList.children);
}
};
});

<div id="section2" class="padding-margin-border column">
<div class="lobby-images-wrapper small-block-grid-1 display-boxes ongoingPromo">
<div class="display-box">
<div class="wrapper-lobby-image-item">
<span class="image-wrapper">
<a href="@@Field.Teaser_Link@@">@@MarkComponentField(FieldPath+".Teaser_Image")@@
<img src="@@Field.Teaser_Image@@" data-original="@@Field.Teaser_Image@@"/>
</a>
</span>
</div>
</div>
</div>
</div>

这是我拥有的3个div之一，因为它不允许我发布更多代码。

Answer 1

这里有两个问题：

1. 您已在循环中设置window.onresize3次。只有最后一个赋值才有效果。您将覆盖前两个处理程序。这就是为什么您的更改仅应用于上一个div。

2. 当HTML文档被完全加载和解析时，会引发Document:DOMContentLoaded事件，这意味着：

   • 您的JavaScript代码是在文档未加载时运行的，因此您的jQuery选择器将找不到您的divs(似乎不是您的情况(。当您将代码直接加载到文档正文开头的脚本中时，就会发生这种情况
   • 您的JavaScript代码是在加载文档后运行的，因此您可以找到所有元素，但事件已经触发，并且从未调用过您的处理程序。当您将代码放入onload处理程序中时，就会发生这种情况
   • 您的代码在创建div之后但在文档完全加载之前运行。例如，如果在</body>的结束标记之前运行代码，就会出现这种情况。这是唯一符合预期的情况。你最好不要把你的代码放在这样的风险中！您的代码应该是健壮和可靠的

修复

以下是如何解决您的问题(请密切关注我的评论(：

// Define your utility functions at the root level
function resizeTeasersTablet(teaserCollection) {
// No need to pass the collection size. It has a `length` property.
let width = undefined;
switch (teaserCollection.length) { // `swith`/`case` is simpler than those `if`s
case 1:
teaserCollection[0].style.width = '73.834%';
teaserCollection[0].style.margin = '0 auto 40px';
// The for loop is not needed. The length is 1!
break;
case 2:
case 4:
case 5:
width = '50%';
break;
case 3:
width = '33.33%';
break;
}
if (width)
for (let t of teaserCollection) // `for..of` is simpler
t.style.width = width;
}
function resizeTeasersMobile(teaserCollection) {
for (let t of teaserCollection)
t.style.width = '100%';
}
// The function name is clear
function resizeBasedOnWindowWidth(boxList) {
if (window.innerWidth > 2024)
displayTeasers(boxList.children);
else if (window.innerWidth > 641)
resizeTeasersTablet(boxList.children);
else
resizeTeasersMobile(boxList.children);
}
// The function name is clear
function resizeAllBoxListsBasedOnWindowWidth() {
$(".display-boxes").each(function () {
resizeBasedOnWindowWidth(this);
});
}
window.onresize = function () {
this.resizeAllBoxListsBasedOnWindowWidth(); // Just call the defined function.
}
$(function () { // See here: https://api.jquery.com/ready/
resizeAllBoxListsBasedOnWindowWidth(); // Do not repeat the code. Just call the function.
})

我在这段代码中使用的原则非常重要。我建议你多次阅读代码：(

祝好运