时间戳

首页 > 解决方案 > Wordpress 和 JavaScript：当产品没有 sku 时尝试隐藏按钮

javascript - Wordpress 和 JavaScript：当产品没有 sku 时尝试隐藏按钮

问题描述

我的 Wordpress 网站遇到这种情况，其中具有变体的产品在访问 DOM 时会丢失某个元素上的一些内部文本（这与没有 sku 的产品的行为相同），但是当我 console.log 元素时，文本在那儿。这是代码：

const makerBtn = document.getElementById("maker-button");
const sku = document.getElementsByClassName("sku");
    
const newLink = document.createElement("a");
newLink.innerText = "Buy at Maker's Site";
newLink.className += "fusion-button button-flat fusion-button-default-size button-custom button-3 fusion-button-default-span fusion-button-default-type";
newLink.addEventListener("click", ()=> {
        newLink.target = "_blank";
        newLink.href = sku[0].innerHTML.toString();
});
        
makerBtn.appendChild(newLink);

我已经在 sku 中的某些产品中添加了 url，如果它们在那里，那么您单击按钮，您将被带到一个新站点。我一直在尝试找到一种方法来隐藏没有 sku 的按钮，但是如果我添加这样的代码：

if (sku[0].innerHTML === "") {
         newLink.style.display = "none"; 
}

它会起作用，除了对于具有变化的产品（它们有一个下拉菜单，您可以在不同的颜色之间进行选择等）隐藏按钮之外，它会起作用，因为 sku[0].innerHTML 将 DOM 作为空字符串击中，即使我控制台记录它并且网址在那里。

我无法弄清楚我可以将这些变量产品的哪个属性添加到条件中，以便这些页面的行为有所不同。感谢您的任何帮助。

标签： javascriptcsswordpresshidegetelementsbyclassname

解决方案

也许你可以试试：

if (sku[0].innerHTML === "") {
    newLink.style.opacity= "0.0"; 
}

推荐阅读