我試圖在 wordpress elementor 迷你購物車為空時添加一個按鈕。為此，我想我會使用承諾等待元素加載然后插入一些相鄰的 html 代碼來顯示按鈕。
這兩個部分似乎分別在回傳承諾然后插入元素時作業。然而，當他們一起作業時，沒有元素出現？關于如何除錯這個的任何想法？要注意什么。我如何監控每件事的觸發順序以確保它以正確的順序發生？
這是我在下面的代碼：它是 wordpress 的一個片段。
<script>
const checkElement = async selector => {
while ( document.querySelector(selector) === null) {
await new Promise( resolve => requestAnimationFrame(resolve) )
}
return document.querySelector(selector);
};
checkElement('.woocommerce-mini-cart__empty-message').then((selector) => {
var message = `
<div style="margin-top:2rem" >
<a href="/toilets" >
<span elementor-button-content-wrapper">
<span >View our products</span>
</span>
</a>
</div>`;
selector.insertAdjacentHTML('afterend', message);
console.log(selector);
});
</script>
<?php } );
有問題的頁面是https://staging-woowoowaterlesstoilets.kinsta.cloud/如果你在沒有任何東西的時候點擊籃子，應該會出現一個按鈕。它之前可以作業，但在更新了一些插件和 wordpress 后，它停止作業了。
uj5u.com熱心網友回復：
這會更簡單
const liveSelector = document.getElementsByClassName('woocommerce-mini-cart__empty-message');
let tId = setInterval(function() {
if (liveSelector.length > 0) {
clearInterval(tId)
var message = `
<div style="margin-top:2rem" >
<a href="/toilets" >
<span elementor-button-content-wrapper">
<span >View our products</span>
</span>
</a>
</div>`;
liveSelector[0].insertAdjacentHTML('afterend', message);
console.log("done");
}
}, 500);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/352812.html