javascript - 在 Windows 调整大小时复制 div 中的内容会产生重复项

Question

我遇到了一个问题，.clone()它会产生如此多的重复项，以至于我的浏览器崩溃了。

这是我的示例代码：

<div>
 <div class="mobile-top"></div>
 <div class="date">January 22, 2019 - 13:44</div>
</div>
<div>
 <div class="mobile-top"></div>
 <div class="date">December 2, 2018 - 3:10</div>
</div>
<div>
 <div class="mobile-top"></div>
 <div class="date">March 22, 2017 - 1:37</div>
</div>

还有我的 JS 代码：

$(window).resize(function() {
 if ($(window).width() < 600) {
  $(".date").clone().appendTo(".mobile-top");
 } else {     
  $(".mobile-top").empty();
 };
}).resize();

我想要做的是当浏览器低于 600px 时，元素中的.date内容被移动到.mobile-top元素中。发生的情况是所有三个.date元素都被分组并移动到.mobile-top每个 div 上，并继续复制内容，直到浏览器崩溃。

当屏幕低于 600 像素时，我想要做的是在每个 div中移动.date到。.mobile-top

到目前为止我所做的工作示例 - https://jsfiddle.net/openbayou/f5qwhnp1/

Answer 1

你只是犯了一个错误，那就是你在克隆。.date在window.resize其中不断克隆和一次又一次地附加这是我的代码，这可能会对您有所帮助。

var date = $('.date').html(),
    mobileTop = $('.mobile-top');
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $(mobileTop).html(date);
        } else {     
            $(mobileTop).html('');
        };
    }).resize();

Answer 2

只需检查元素是否已插入

window.addEventListener('resize', function() {
  if (window.innerWidth < 600) {
    document.querySelectorAll('.date').forEach(function(el) {
      if (el.parentElement.classList.contains('mobile-top')) {
        return
      }

      var parent = el.parentElement
      var mobileTop = parent.querySelector('.mobile-top')

      mobileTop.appendChild(el)
    })
  }
})

<div>
  <div class="mobile-top"></div>
  <div class="date">January 22, 2019 - 13:44</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="date">December 2, 2018 - 3:10</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="date">March 22, 2017 - 1:37</div>
</div>