修复

Question

我见过类似的案例，但我似乎无法弄清案例如何。

因此，我得到了3个不同的div，它们都具有相同的“显示框”类。我想做的是将我的函数应用于所有3个div。目前，该功能仅适用于最后一个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

这里有两个问题：

您已window.onresize设置了3次循环。只有最后一次分配才有效。您将覆盖前两个处理程序。这就是为什么您的更改仅应用于最后一个div的原因。
Document:DOMContentLoaded事件，这意味着：
- 您的JavaScript代码在未加载文档时运行，因此jQuery选择器将找不到您的div（看来情况并非如此）。当您直接在文档正文开头的脚本中加载代码时，就会发生这种情况。
- 您的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.
})

我在此代码中使用的原理非常重要。我建议您多次阅读代码：）

祝你好运

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

1 个答案:

修复