Я хочу, чтобы 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();
   }

})();
2
Joelad 23 Окт 2019 в 10:16

2 ответа

Лучший ответ

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

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

    });

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

3
Dan Iftinca 23 Окт 2019 в 07:31

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

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

И это прекрасно работает для меня

0
Akshita Karetiya 23 Окт 2019 в 07:38
58517409