jquery .empty () работает только после двух вызовов метода - PullRequest
Новая
       18

jquery .empty () работает только после двух вызовов метода

2 голосов
/ 22 марта 2019

Я написал несколько jquery для того, чтобы через заданный интервал запустить функцию, которая извлекает текст из специальных стилей div и устанавливает вытянутый текст в качестве текста для другого div.

Моя проблема в том, что новый текст объединяется до конца старого текста, который должен быть предварительно удален из элемента. Эта проблема сохраняется до тех пор, пока интервал не будет запущен снова, после чего в этом случае отображается только предполагаемый текст.

Не могли бы вы помочь мне показать только предполагаемый текст.

Вот пример и мой код 

function captionUpdate() {
  //empty the div
  $('#myDiv').empty();
  // select the correct caption
  var caption = $('.wslide-slide').filter(function() {
    return $(this).css('display') === 'block'
  }).children().text();

  // put the caption into the div
  $('#myDiv').text(caption);
};

// check the webpage every half second
setInterval(function() {
  captionUpdate();
}, 50);

// this is just for the snippet
let currentList = 0
$('#toggle').on('click', () => {
  currentList = (currentList + 1) % 3
  $('.wslide-slide').hide().eq(currentList).show()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Initial text</div>




<div class="wslide-content-inner">

  <div class="wslide-slide" style="display: none;">
     <div class="wslide-slide-inner1">
        <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
           <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
           <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
              <div class="wslide-caption-text">caption 1</div>
              <div class="wslide-caption-bg"></div>
           </div>
        </div>
     </div>
  </div>

  <div class="wslide-slide" style="display: none;">
     <div class="wslide-slide-inner1">
        <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
           <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
           <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
              <div class="wslide-caption-text">caption 2</div>
              <div class="wslide-caption-bg"></div>
           </div>
        </div>
     </div>
  </div>

  <div class="wslide-slide" style="display: none;">
     <div class="wslide-slide-inner1">
        <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
           <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
           <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
              <div class="wslide-caption-text">caption 3</div>
              <div class="wslide-caption-bg"></div>
           </div>
        </div>
     </div>
  </div>


</div>
<p>
  <button id="toggle">Toggle lists</button>
</p>
...