在锚标记的文本更改上显示/隐藏带有 JavaScript 的 div

Question

我希望 div lds-roller仅在 ID 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>

lds-roller的 Css 如下。

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

我尝试了很多方法，但它们似乎总是要么继续显示div ，不显示div ，要么在文本更改之前让div消失。

JS function 通常沿着这条线走

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

})();

Answer 1

您需要将 function 绑定到一个事件。 例如，在 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();
   }
});

它对我来说很好用