如何在页面加载时替换不在DOM中的文本

Question

我不是javascript或jQuery的专家。我想在页面加载时替换不在DOM中的文本。单击按钮后，将显示文本。这是我正在使用的代码...

$(window).load(function(){
    $(document).on('change', '.shippingquote', function() {
        $(this).html($(this).html().replace(/Free Shipping/g,'Free Shipping (4-8 days)'));
    });
});

Answer 1

$(function(){ $('body').html("Free Shipping, Free shipping")});

通过替换您在顶部提到的完整代码来实现此代码块。它会将给定的文本设置为完整的正文。如果您想设置特定容器的文本(div、段落、span等)，则在选择器中提供id。

$(function(){$('#id').html("text goes here")});

祝你好运..

Answer 2

您可以使用"$(function () {...});“在页面加载后运行代码，而不需要将其绑定到load事件。以下代码将替换页面加载时出现的所有Free Shipping。

​

$(function(){
        $("body").html($("body").html().replace(/Free Shipping/g,'Free Shipping (4-8 days)'));
});

​

已经引入了MutationObservers来做你想做的事情，但是浏览器对它的支持仍然很低(ie11)。我使用过DOMSubtreeModified，虽然它只在ie9+上运行。我还必须使用一个全局变量来阻止事件被重复调用(我想要一个更好的建议)。

​

var modifiedByFunction = false;

jQuery(function() {
  jQuery("input").on("click", function(e) {
    jQuery(".shippingquote").html("The words Free Shipping are in this");
  });

  jQuery(".shippingquote").on("DOMSubtreeModified", function() {
    if (modifiedByFunction) {
      modifiedByFunction = false;
    } else {
      modifiedByFunction = true;
      jQuery(this).html(jQuery(this).html().replace(/Free Shipping/g, 'Free Shipping (4-8 days)'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click me">
<div class="shippingquote"></div>

​

Answer 3

首先：

jQuery 1.8版中不推荐使用load事件。

click here

第二点:我同意chanchal yadav的观点。