Копирование содержимого в div при изменении размера окна приводит к дублированию - PullRequest
Новая
       34

Копирование содержимого в div при изменении размера окна приводит к дублированию

0 голосов
/ 02 марта 2019

У меня проблема с .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();

То, что я пытаюсь сделать, это когда броузер меньше 600 пикселей, содержимое элемента .date перемещается в элемент .mobile-top.Происходит следующее: все три элемента .date группируются и перемещаются в .mobile-top на каждом элементе div и продолжают дублировать содержимое до сбоя браузера.

Я пытаюсь переместить .date в.mobile-top в каждом div, когда экран меньше 600px.

Рабочий пример того, что я сделал до сих пор - https://jsfiddle.net/openbayou/f5qwhnp1/

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Просто проверьте, вставлен ли уже элемент 

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>
0 голосов
/ 02 марта 2019

Вы просто делаете одну ошибку, что вы клонируете..date внутри window.resize, который постоянно клонирует и добавляет снова и снова, вот мой код, это может вам помочь. 

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