javascript - 显示 Flash 消息时添加 DOM 膨胀

Question

在我的 Rails 应用程序中，当用户保存时，它使用 Ajax 保存帖子，然后执行 update.js.erb 文件。在那个文件中，我有一些 jQuery：

$('body').append('<div class="message">Saved</div>');

因为我有这种方式，所以每次用户保存时，它都会<div class="message">Saved</div>在正文中添加更多内容。有没有办法可以阻止它或者没关系？

Answer 1

首先，除非保存发生数千次，否则可能无关紧要。请记住，图像非常大，因此与几张图像相比，网页中几 kb 的额外文本显得苍白无力。

其次，您有几个选项可以在 DOM 中只拥有其中一个：

1. 将其展示给用户后，将其从 DOM 中移除（可能在计时器上）。
2. 拥有一条且只有一条消息并在需要时显示/隐藏它（这可能是最简单的）。
3. 查看是否已经在页面中并重复使用它。

例如，要查找以前的消息对象（开始时是隐藏的）并将其显示一小段时间，您可以使用以下命令：

$(".message").html("Saved").show().delay(2000).fadeOut(1000);

如果您使用它，您只需将消息对象放在您的页面中一次，无论是在原始页面 HTML 中还是在页面启动代码中附加一次。然后，让 CSS 将其默认为隐藏，以便仅在您希望时显示。

或者，如果你使用基于类名的 CSS3 过渡，你可以只使用 jQueryaddClass()和removeClass().

Answer 2

一种懒惰（但简单）的方法是在显示新消息之前清除其他消息：

$('.message').remove();
$('body').append('<div class="message">Saved</div>');