Wordpress Javascript 注入不起作用

Question

我在包含此代码的子主题中创建了一个 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 吗？

谢谢你

Answer 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');
    // ...?
  }

});

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