在WordPress页面中运行内联jQuery脚本是否可行？

Question

在页面中间（内联）运行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>

即使在这个片段中没有事件来触发它，它仍然可以正常工作，只是运行并替换了前面的元素。因此，内联脚本必须能够工作。

我有点困惑。

- Chris Hawkins

---

它是否会抛出任何错误？.upb_row_bg是一个静态元素，已经存在还是动态生成的？ - agrm

看起来 .upb_row_bg 元素在运行代码时还没有被“打印”到 DOM 中。 - Sagiv b.g

有意义。有没有测试的方法？ - Chris Hawkins

谢谢...我会查看脚本的位置。或者至少使用像on('load..这样的事件。 - Chris Hawkins

иү™ең€жњ‰и¶ӘпәЊе› дёғ $(document).ready() еғ”иҮӨењЁ DOM е®Ње…ЁеЉ иҢҢеђҺ触发。е‡ғдғҺеӨҢеӨ‡пәЊе¦‚жһњдҢ з”Ё $( window ).on( "load", function() ж›үжҚұе®ѓдәљеЏ‘з”џд»Ђд№€е‘ұпәџж€‘дёҚеғ”иҮӨжњџжњ›е®ѓдәљжњ‰д»»дҢ•еЊғ别пәЊе› дёғе®ѓеЏҒдәљз­‰ең…е›ңеѓЏ/iframe з­‰пәЊдҢ†еЂәең—дёЂиҮ•гЂ‚ - TommyBs

Answer 1

你的语法看起来很奇怪。

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

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

至于您尝试使用第二个代码片段实现的内容，只需执行以下操作：

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

---

或者，如果你真的需要figure不在考虑范围之内

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

- ethancrist

---

“figure”是一个HTML标签，被WooCommerce（https://github.com/woocommerce/woocommerce/blob/master/templates/single-product/product-image.php）使用。这段代码片段是内联jQuery工作的示例。该片段将figure标签替换为div（和新类）。我遇到的问题是我发布的第一个代码块。但事实证明，在调用代码时DOM尚未准备好。使用jQuery(window).load(function()解决了这个问题。 - Chris Hawkins