使用下面的代码,我从 Shopify 应用程序中隐藏了一个产品选项。我需要将 CSS 选择器缩小到 data-option-id 属性,以便在我向页面添加另一个选项的情况下仅隐藏该产品选项。
{% if template contains "product" and product.handle == "copy-2-add-a-custom-logo" %} if (getCookie(customLogoCookie) == "1") { let myInterval = setInterval(function() { const customLogoOptionSetId = "gsAppContainer"; // Fixed id let customLogoSelector = document.getElementById(customLogoOptionSetId); if (!customLogoSelector) { return; } clearInterval(myInterval); // Hide the custom options. We need to go 3 levels up. customLogoSelector.style.display = "none";
您想隐藏箭头指向的 div 时,可以使用属性选择器。
[data-option-id="yourIDhere"] { display: none; }
当您想隐藏父级id="gsAppContainer"时,您必须在模板中或通过 JavaScript 工作,因为在 CSS 3 中没有 CSS 选择器来设置父级样式。
id="gsAppContainer"
const childElement = document.querySelector('[data-option-id="yourIDhere"]'); childElement.closest('#gsAppContainer').style.display = "none";