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

通過添加將所有 function 放入window.onload解決了這個問題。

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