通知栏仅出现

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 中。

尝试这个。

        xmlhttp.onreadystatechange=function() {

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

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

          

            $("#live_update").fadeIn("3000", function() {

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

            });

            $("#live_update").fadeOut("3000", function() {

            $(this).removeClass("bg-warning text-center text-dark p-2 h5 mx-auto");

            });

         }

        }

您也可以使用fadeToggle 。