Показывать div, пока код равен заданному тексту

Question

У меня есть этот код JavaScript в минуту, который не так. Я хочу показать div lds-roller, в то время как текст в id = searchFor равен _

(function() {

  if ($("#searchFor").text() === "_") {
    $('.lds-roller').show();
  }
})();

<div class="lds-roller"><div></div><div></div><div>
</div><div></div><div></div><div></div><div></div><div></div></div>
 <p>
     <span class=""> 

      <span class="">
             <a href="{% pageurl post %}#disqus_thread" id="searchFor"> _
            </a>
      </span>
   </span>
 </p>

Кажется, что примерно через 10 секунд появляется HTTP-ответ на изменение _к 1 например. Я хочу, чтобы lds-roller не было видно в сообщении, когда это произойдет.

.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;

}

Answer 1

Вы можете использовать функцию jQuery keyup для запуска изменения поля ввода.

Если событие изменения не является событием ввода с клавиатуры, вы можете использовать событие change jQuery. Основным недостатком использования этого является то, что если вы собираетесь на событие клавиатуры, это не будет отражаться до тех пор, пока вы не будете выбиты из поля ввода или не нажмете клавишу ввода.

$(document).ready(function() {
  $("#searchFor").keyup(function() {
    // $("#searchFor").change will also work 
    if ($("#searchFor").val() === "_") {
      $(".lds-roller").show();
    } else {
      $(".lds-roller").hide();
    }
  });
});

.lds-roller {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Press "_" and see the hidden button</p>

<input type="text" id="searchFor" />

<button class="lds-roller">hidden button</button>

Answer 2

 $(document).ready(function() {
  if ($("#searchFor").text() == "_") 
  {
   $('.lds-roller').removeClass('lds-roller');
  }
 });

or


 $(document).ready(function() {
  if ($("#searchFor").text() == "_") 
  {
  $('.lds-roller').css('display','block');
  }
 });

Answer 3

Как вы упомянули, ваш текст изменяется после некоторого HTTP-запроса (или аналогичного).

Итак, один из подходов заключается в том, чтобы сначала показать div после загрузки страницы:

$(document).ready(function() {
    $('.lds-roller').show(); //initially, show the div
});

Затем в функции обратного вызова, которая изменяет значение #searchFor, добавьте следующую строку, чтобы скрыть div:

$('.lds-roller').hide(); //the info is now retrieved, hide the div

---

В качестве альтернативы, вы можете использовать MutationObserver объект, чтобы вызвать событие всякий раз, когда содержимое вашего div (#searchFor) изменилось. Это может быть излишним для этой проблемы.

Answer 4

Вы говорите, что хотите, чтобы что-то произошло , а что-то еще равно чему-то. Это подразумевает либо опрашиваемый таймер для проверки этого состояния, либо событие, которое должно быть триггером. Вы можете зарегистрировать прослушиватель событий для onchange из searchFor, однако вам также понадобится else для обработчика, чтобы скрыть элемент, когда условие подчеркивания не выполняется.