通知栏仅出现

Question

我有这段动态代码。这应该向 PHP 发送请求并获得响应。每次有新通知时，它都应该 fadeIn() 和 fadeOut() 。它将响应显示为页面顶部的通知栏，但是，它只会逐渐出现一次。当我再次发送请求时，会有响应，但不会再次显示通知栏。如果有人能帮助我解决这个问题，我将不胜感激。这是我的代码：

<script>

    function live_update(el) {

        var str = el.value ;

        var id  = el.id ;

        if (str.length==0) { 

        document.getElementById("live_update").innerHTML="";

        

        return;

      }

      if (window.XMLHttpRequest) 

      {

        xmlhttp=new XMLHttpRequest();

      }

      xmlhttp.onreadystatechange=function() {

        if (this.readyState==4 && this.status==200) {

          document.getElementById("live_update").innerHTML=this.responseText;

          

            $("#live_update").addClass("bg-warning text-center text-dark p-2 h5 mx-auto");

            $('#live_update').fadeOut(3000);

        }

      }

      xmlhttp.open("GET","profiles.php?act=live_update&u_key={u_key}&id="+id+"&q="+str,true);

      xmlhttp.send();

    }

</script>

Answer 1

为了再次显示 div live_update，您需要将方法 fadeIn 与 div live_update一起使用以使其可见。此外，您需要删除第一次显示响应时添加的类。否则，在每个 ajax 响应中，它都会不断添加到 div 中。尝试这个。&nbsp; &nbsp; &nbsp; &nbsp; xmlhttp.onreadystatechange=function() {&nbsp; &nbsp; &nbsp; &nbsp; if (this.readyState==4 && this.status==200) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("live_update").innerHTML=this.responseText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#live_update").fadeIn("3000", function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("bg-warning text-center text-dark p-2 h5 mx-auto");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#live_update").fadeOut("3000", function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass("bg-warning text-center text-dark p-2 h5 mx-auto");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; }您也可以使用fadeToggle 。