При изменении текста тега привязки показать / скрыть div с помощью JavaScript

Question

Я хочу, чтобы div lds-roller отображался только тогда, когда текст с идентификатором searchFor anchor tag равен _. Изменение в тексте должно произойти с ответом HTTP.

<div class="lds-roller"><div></div><div></div><div>
</div><div></div><div></div><div></div>
<div></div><div></div></div>
                <p>
                      <span class="r"> 
                               <span class="andom">
                                  <a href="{% pageurl post %}#disqus_thread" id="searchFor"> _
                                            </a>
                                </span>
                      </span>
                  </p>

Css для lds-roller выглядит следующим образом.

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

Я пробовал множество способов, но они, кажется, всегда либо продолжают показывать div, не отображая div, либо заставляя div исчезнуть до того, как текст даже изменится.

JS функция обычно проходит в соответствии с этой

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

})();

Answer 1

Вам нужно будет привязать функцию к событию. Например, в jQuery вы можете использовать что-то вроде этого:

    $("body").on('DOMSubtreeModified', "#searchFor", function() {
         if ($("#searchFor").text() === "_") {
           $('.lds-roller').show();
         }
         else {
          $('.lds-roller').hide();
         }

    });

В данный момент ваш код выполняется один раз во время загрузки, и поэтому он показывает только div.

Answer 2

Вы должны изменить свой код js. должно быть так:

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

и у меня все отлично работает