jquery工具提示：追加/删除与显示/隐藏

Question

我正在显示像这样的工具提示

$(clickedElement).append('<span id="activeHelpTip" class="helpTip">Loading help...</span>');
$('#activeHelpTip').remove();

一位同事建议在页面加载时，我附加所有可能的工具提示，其可见性为none，并根据需要显示/隐藏它们。

有什么区别？谁在乎？

编辑：工具提示是否由ajax服务提供是否相关？

Answer 1

我认为按照你的同事谈论的方式做起来会更容易一些，也更容易维护，因为这通常会导致工具提示紧挨着他们所引用的元素，在HTML中，而不是在脚本中在某个地方，你直接用HTML编写它们而不是JS字符串。

我预计其中任何一个都不会明显快于另一个，或使用有意义的不同内存量。

重新编辑：如果您的工具提示当前是通过Ajax提取的，那么如果它们在页面中预先加载，它们自然会更快出现。

Answer 2

除了可维护性之外 - 您正在做的事情将表现良好，遵循选择器的严格范围的最佳实践。所以没有改变的性能原因。

从可维护性的角度来看，它肯定可以改进，使提示列表更容易编辑 - 让文本远离标记。

Answer 3

我认为使用show和hide而不是append和remove的最大原因是，当你使用.remove()时，它会破坏所有事件处理程序并缓存你要移除的DOM对象上的$.data。

来自jQuery docs

  

从中删除所有匹配的元素   DOM。这不会删除它们   jQuery对象，允许你使用   匹配的元素。注意   这个函数从1.2.2开始   还将删除所有事件处理程序   和内部缓存的数据。所以：

Answer 4

这只是一种更清洁，更简单的方法。此外，您可以使用不同的方法来显示/隐藏隐藏元素上的fadeIn（）/ fadeOut（），slideDown（）/ slideUp等提示。

Answer 5

由于您已经在使用jQuery，因此您应该查看Tooltip plugin。它使得显示工具提示非常简单，而且非常灵活。