querySelectorAll 在 Woocommerce 单个产品页面中找不到元素

Question

尝试使用单个产品库导航。这是 Woocommerce 网站。

这里是HTML这个区域的代码：

对不起，我无法从页面源代码中复制它，因为没有这段代码。我正在尝试使用此代码获取 ol.flex-control-nav 元素：

console.log('ok');
let addImagesLength = document.querySelectorAll('.woocommerce-product-gallery ol');
console.log(addImagesLength);

在控制台日志中使用“ok”来确定之前的代码是正确的。所以我在日志中得到的一切都是空节点列表。我假设 ol.flex-control-nav 元素在 .js 文件加载后出现。我还想提及的一件事是，使用此代码段在 wwocommerce.php 页面中调用了产品库导航部分：

function web_add_woocommerce_support() {
    add_theme_support( 'woocommerce' );
}
add_theme_support( 'wc-product-gallery-slider' );
add_action( 'after_setup_theme', 'web_add_woocommerce_support' );

所以我假设，这段代码会在 .js 文件完全加载后加载图库导航。试图在此 PHP 代码之后将单独的 .js 文件加入队列，但结果是一样的。如果是这样，那我该如何解决这个问题呢？

Answer 1

通过添加将所有函数放入 window.onload 解决了这个问题。

window.onload = function () {
    console.log('ok');
    let addImagesLength = document.querySelectorAll('.flex-control-nav');
    console.log(addImagesLength);
}

querySelectorAll 在 Woocommerce 单个产品页面中找不到元素

querySelectorAll doesn't find element in Woocommerce single product page

html

javascript

php

woocommerce