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 文件在标头中，这意味着当它执行时，页面的 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');
// ...?
}
});

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