Wordpress Javascript注入不起作用答案

【问题标题】：Wordpress Javascript injection not workingWordpress Javascript注入不起作用
【发布时间】：2020-02-13 15:44:28
【问题描述】：

我在我的子主题中创建了一个包含此代码的 js 文件

    const prID = "10496";
const EL_prID = document.querySelector(`[data-product-id="${prID}"]`);

if (EL_prID) {
  EL_prID.parentNode.classList.add('is-hidden');}

我使用插件在页面标题中注入代码：我在标题中添加了我的 js 文件的 url。

我添加了 Css 代码： .is-hidden:{display:none;}

当我检查调试器时，js 文件出现在标题中。但是我的 html 元素并没有像它应该隐藏的那样隐藏。

我的错误在哪里？我应该在代码之前和之后在我的 javascript 文件中添加 balise 吗？

谢谢

【问题讨论】：

是否有任何 CSS 凌驾于您的规则之上？
JavaScript 甚至无法正常工作...隐藏类未添加到我的元素中...
您必须使用@Damocles 的解决方案或将您的脚本移到页脚

标签： javascript wordpress parent-child parent

【解决方案1】：

如果你的 JS 文件在 header 中，则表示在执行时，页面的 DOM 没有完全加载。将这些东西包装在一个加载事件监听器中（如果你必须在 vanilla JS 中这样做）：

window.addEventListener('load', function() {
  const prID = "10496";
  const EL_prID = document.querySelector(`[data-product-id="${prID}"]`);

  if (EL_prID) {
    EL_prID.parentNode.classList.add('is-hidden');
    // ...?
  }

});

当所有元素都被加载时触发，因此，查询选择器至少应该找到它应该找到的东西（如果选择器匹配）。

【讨论】：

另一种选择是在页脚而不是页眉中加载 JS。