javascript - Wordpress Javascript注入不起作用
问题描述
我在包含此代码的子主题中创建了一个 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 吗?
谢谢你
解决方案
如果你的 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');
// ...?
}
});
这会在所有元素都加载时触发,因此,查询选择器至少应该找到它应该找到的内容(如果选择器匹配)。
推荐阅读
- php - Preg 根据字符串替换文本
- json - pandas 字典行到列
- swift - 调度组不通知?
- python - 在 Python3 中使用优先队列进行堆栈
- python - 具有多个根元素的“XML”文档
- python - 将 .txt 文件中的元素作为列表而不是字符串打开
- python - 如何使用 Django 中的选择 - 如何显示特定内容?
- android - 该位置没有 XML:http://schemas.android.com/apk/res/android
- ruby-on-rails - 如何从静态站点向 Rails 应用程序发布请求?
- javascript - firebase.fireStore() 不是函数