javascript - js .html() 通知窗口在第一次成功触发后消失

Question

我的 JS 代码有问题，请检查并提出可能出现问题的建议。

在我的 html 页面中，我有一个“div”为 <div id="notification"></div> 这个“div”是我想显示不同类型的通知的地方，这些通知可能在 PHP 代码(例如，保存在“myphppage.php”中)成功执行后出现。

<div class="cycle">
  <input value="Add to Cart" onclick="addToCart('828');" class="button" type="button">
</div>

这是单击按钮后触发的 JavaScript:

function addToCart(quantity) {

 $.ajax({
   url: 'myphppage.php',
   type: 'post',
   data: '&quantity=' + quantity,
   dataType: 'html',
   success: function(html) {

     if (html == 'success') {

       $('#notification').html('Success: Book added in your cart.' + '<img src="/img/close.png" class="close" />').show();

       $('#notification').addClass('success');

       $('.success').fadeIn('slow');

     }
   }
 })
}

在 php 代码回显“成功”之后，#notification 在网页中正确显示，但随后点击“添加到购物车”按钮时，尽管 php 代码在后台成功执行，并且 php 代码回显“成功”#通知未显示任何内容。

作为一种解决方法，如果我刷新网页，它会再次工作一次，从下一次开始它就会消失。

Answer 1

您的#notification在隐藏后必须有一个内联CSS display: none;。那么下次当您使用 .show() 时，它将不起作用。
尝试删除 .show()，因为它的作用与 .fadeIn() 相同。