仅触发一次调整大小

Question

当客户端的 window 调整大小时，我试图反转两个 div，但我的函数循环。我知道这可以使用 flexbox 变得非常容易，但我更感兴趣的是了解如何使用 JS 使其工作。刚开始学习JS，正在尝试函数

当客户的 window 低于 58em 时，我希望 div 重新排列 - 例如 flex-direction: column-reverse;。当 window 未调整大小或大小大于 58em 时，该函数不应执行任何操作

var reverse = document.querySelectorAll(".reverse");

function reverseChildren(parent) {
  for (var i = 1; i < parent.childNodes.length; i++){
    parent.insertBefore(parent.childNodes[i], parent.firstChild);
  }
}

window.addEventListener('resize', function () {
if (window.matchMedia("(max-width: 58em)").matches) {
    for (i = 0; i < reverse.length; i++) {
      reverseChildren(reverse[i]);
    }
  }
});

<div class=" reverse">
  <div class="first">
    <h4>some text</h4>
  </div>

  <div class="second">
    <img src='https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=363a88755a7b87635641969a8d66f7aa' alt="Registration screen">
  </div>
</div>

Answer 1

您应该监听匹配媒体而不是调整大小事件。

var reverse = document.querySelectorAll(".reverse");


/* Any other code that reverses the ordre of elements is viable within this function */
function reverseChildren(parent) {
  let children = [];
  for (var i = 0; i < parent.children.length; i++) {
    children.push(parent.children[i]);
  }
  children = children.reverse().map(item => item.outerHTML).join('');
  parent.innerHTML = children;
}



let media = window.matchMedia("(max-width: 58em)");
media.addListener(() => {
  for (var i = 0; i < reverse.length; i++) {
    reverseChildren(reverse[i]);
  }
});

<div class=" reverse">
  <div class="first">
    <h4>some text</h4>
  </div>

  <div class="second">
    <img src='https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=363a88755a7b87635641969a8d66f7aa' alt="Registration screen">
  </div>
</div>
<span class="mq-value"></span>

仅触发一次调整大小

Trigger resize only once

html

javascript

css

resize