在 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 元素都被分组并移动到每个 div 上的 .mobile-top 并继续复制内容直到浏览器崩溃。

我想做的是在屏幕小于 600px 时将每个 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>

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

Copying contents in a div on windows resize produces duplicates

javascript

jquery-clone