Question

我在错误的那一刻有此javascript代码。我想在lds-roller中的文本等于id = searchFor时显示div _

(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

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

ready（）方法用于在加载文档后使函数可用。页面DOM准备执行JavaScript代码后，您在$（document）.ready（）方法中编写的任何代码都将运行。

完整答案

<style>
    .lds-roller {
        display: none
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchFor">dsfds_</div>
<div class="lds-roller">Hi I'm lds-roller!</div>

<script>
    (function() {
          if ($("#searchFor").text() === "_") {
            $('.lds-roller').css('display','block');
          }
        })();
</script>

Answer 2

您可以使用jQuery keyup函数来触发输入字段更改。

如果change事件不是键盘输入事件，则可以使用jQuery的change事件。使用此功能的主要缺点是，如果您要进行键盘事件，则直到您从输入字段模糊或按Enter键时，该功能才会反映出来。

$(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 3

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

or


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

Answer 4

您说您想要某事发生，而其他事等于某事。这意味着要么轮询计时器以检查该状态，要么要触发一个事件。您可以为onchange中的searchFor注册一个事件侦听器，但是当不满足下划线的条件时，您还需要向处理程序添加else来隐藏元素。

Answer 5

如前所述，您的文本在经过某些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

或者，只要div（#searchFor）的内容已更改，就可以使用MutationObserver对象引发事件。不过，对于这个问题，这可能是过大了。

当代码等于给定文本时显示div

5 个答案: