Wordpress Javascript 注入无效

Question

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

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

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

我使用插件在我页面的 header 中注入代码：我在 header.

中添加了我的 js 文件的 url

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

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

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

谢谢

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

});

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

Wordpress Javascript 注入无效

Wordpress Javascript injection not working

javascript

wordpress

parent-child

parent