小编典典

将 CSS 选择器缩小到 data-option-id

all

使用下面的代码,我从 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";

在此处输入图像描述


阅读 136

收藏
2022-08-24

共1个答案

小编典典

您想隐藏箭头指向的 div 时,可以使用属性选择器。

[data-option-id="yourIDhere"] {
  display: none;
}

当您想隐藏父级id="gsAppContainer"时,您必须在模板中或通过 JavaScript 工作,因为在 CSS 3 中没有 CSS 选择器来设置父级样式。

const childElement = document.querySelector('[data-option-id="yourIDhere"]');
childElement.closest('#gsAppContainer').style.display = "none";
2022-08-24