页面内的内联 jQuery 脚本答案

【问题标题】：Inline jQuery script inside the page页面内的内联 jQuery 脚本
【发布时间】：2017-11-12 21:49:07
【问题描述】：

难道不能在页面中间运行jQuery（内联）吗？

我尝试在自定义 WordPress 模板中运行此代码....

<script type="text/javascript">
jQuery(document).ready( function() {
  jQuery(".upb_row_bg").css("filter","blur(30px)");
});
</script>

但它似乎对相关元素没有影响。事实上，如果甚至无法选择元素 - console.log('jQuery(".upb_row_bg).length; 显示为 0。

如果我在 wordpress wp_footer() 函数之后的结束标记之前放置相同的代码，它就可以工作。如果我把它放在 wp_footer 之前，那么它不会。

有什么想法吗？我在另一个页面上有另一个脚本，我可以在其中使用由 wordpress 过滤器生成的简单内联脚本...

<script>jQuery( "figure" ).replaceWith( "<div class=\”new-class\”>” + jQuery( "figure" ).html() + "</div>" );</script>

即使使用此 sn-p 没有事件触发它，它也可以按预期工作，它只是运行并替换了前面的元素。所以内联脚本必须工作。

我有点困惑。

【问题讨论】：

它会抛出任何错误吗？ .upb_row_bg 是已经存在的静态元素还是动态生成的？
它是静态的（由 WordPress 插件生成）。控制台中没有错误。
在您运行代码时，.upb_row_bg 元素似乎没有“打印”到 DOM。
有道理。无论如何要测试一下？
最佳实践是将脚本放在关闭 </body> 标记之前，原因如下。您可以通过在正文中创建一个带有单个 <p> 元素的静态 HTML 文件来测试这一点。然后在元素之前和之后运行一次console.log($('p').length)。结果应显示0 和1。

【解决方案1】：

你的语法看起来很奇怪。

<script type="text/javascript">
$(document).ready(function() {
  $('.upb_row_bg').css('filter', 'blur(30px)');
});
</script>

'figure' 看起来不是一个有效的选择器，请使用类或 ID。

至于你试图用你的第二个代码 sn-p 完成的事情：

<script>$('#figure').addClass('new-class')</script>

或者，如果你真的需要figure 是不可能的

<script>$('.figure').addClass('new-class'); $('.new-class').removeClass('figure')</script>

【讨论】：

'figure' 是 WooCommerce (github.com/woocommerce/woocommerce/blob/master/templates/…) 使用的 HTML 标签。这段代码 sn-p 是内联 jQuery 工作的一个示例。那 sn-p 用 div （和一个新类）替换了图形标签。我遇到的问题是我发布的第一个代码块。但事实证明，在调用代码时 DOM 还没有准备好。用 jQuery(window).load(function() 触发它修复了这个问题。