0

我正在创建一个小型 Web 应用程序，并且我在一些功能中使用了 AJAX，例如创建和删除某些对象。

为了通知用户，我使用 PHP 将 HTML 通知回显到屏幕上，具体取决于对象是否成功创建的天气。

if ($query) {
 //response to ajax call if successful
  echo '<div class="alert alert-success"><a class="close" data-dismiss="alert">×</a><h4 class="alert-heading">Success!</h4>Object Added!</div>';

}

问题是，随着时间的推移，通知会在屏幕上堆积，因为没有刷新来删除它们。

我有一个 jQuery 函数，可以每 5 秒删除一次警报，如下所示

function clearAlerts(){
        setTimeout(function() {
            $('.alert').fadeOut('fast');
        }, 5000);
    }

但是我不知道每次将通知添加到页面时如何调用此函数，无论如何使用 jQuery 来检测通知何时回显到页面上，或者每次添加时运行此 jQuery 函数.

谢谢

4

2 回答 2

2

将此标签直接放在您正在生成的每个 HTML 片段中，您可以以任何您喜欢的方式对其进行样式设置：

<span class="close-notification">Close</span>

然后用这块JS在点击的时候把它去掉。

$(document).on('click', '.close-notification', function(){
    $(this).parent().fadeOut(); // could use .remove(), .slideUp() etc
});
于 2012-05-09T12:55:30.677 回答
0

你想要的都是可能的，通过 jQuery。首先，在通知 div 中添加一个类，例如：

<div class="notification">Notification</div>

然后这个jQuery： 

$(".notification").live("准备好", function(){
                $(".notification").setDelay(5000).fadeOut("slow");
            });

于 2012-05-09T13:06:24.227 回答