jQuery 使文本在明显之前发生变化答案

【问题标题】：jQuery Make Text Change Before It's NoticeablejQuery 使文本在明显之前发生变化
【发布时间】：2015-06-16 21:42:15
【问题描述】：

我正在使用以下代码在网站上进行文本更改：

jQuery(document).ready(function() {
    jQuery('div#sidebar ul.side-nav li.current_page_item a').text('Request a Quote');
});

问题是，更改是在网页完成加载之前完成的，因此用户实际上可以在插入新文本之前看到原始文本是什么。这不是预期的效果。有没有一种方法可以运行这个简单的 jQuery 命令而不在用户眼前执行？应该在页面加载之前更改文本，使其看起来一直存在。

【问题讨论】：

你为什么不能改变它最初的填充方式？
这就是$(document).ready函数的目的……
CMS 不允许我直接更改该文本，因此我必须破解源代码。我宁愿使用 jQuery 进行更改。
$(document).ready 没有产生预期的效果，变化非常明显。
使用 PHP 可能值得 <a><?php echo "Request a Quote"?></a>

标签： javascript jquery html dom text

【解决方案1】：

您可以在更改文本之前隐藏它，然后再显示它：

jQuery(document).ready(function() {
    jQuery('div#sidebar ul.side-nav li.current_page_item a')
      .hide()
      .text('Request a Quote')
      .show();
});

【讨论】：

如果你这样做，会发生完全相同的事情；这很明显。 Tellez 的方法很有效，因为他先使用 CSS 隐藏元素，而您使用的是 jQuery。

【解决方案2】：

您可以使用 css 将锚点显示为最初隐藏。更新您的文本并使用 jquery 显示。

jQuery(document).ready(function() {
    jQuery('div#sidebar ul.side-nav li.current_page_item a').text('Request a Quote').show();
});

div#sidebar ul.side-nav li.current_page_item a {
  display: none;
}

【讨论】：

宾果游戏！这是正确的答案。关键是您如何使用 CSS 隐藏元素，因为 CSS 确实在页面可见之前执行。然后，您只需使用 jQuery 来显示更改后的元素。很有创意的回答，谢谢！