css 使用纯JavaScript找不到特定类时隐藏主div

j2cgzkjk 于 2022-11-27 发布在 Java

关注(0)|答案(2)|浏览(103)

当类（'ks-chart-container'）不在页面中时，我试图隐藏主div（'product-block-list__item product-block-list__item--content size__chart'）。
(No jQuery（如果可能）
下面是带有（'ks-chart-container'）的容器。

<div class="product-block-list__item product-block-list__item--content size__chart">
  <div class="card">
    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43">
      <span class="card__title heading h3">Size chart</span>
      <span class="plus-button plus-button--large"></span>
    </button>
    <div id="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43" class="card__collapsible" style="height: 0px;">
      <div class="card__collapsible-content">
        <div class="rte text--pull">
          <div id="KiwiSizingChart" class=" kiwiSizingLoaded">
            <div class="ks-chart-container sizing-chart-container">
              <div class="ks-chart-tab-container"></div>
            </div>
            <div class="ks-calculator-container sizing-calculator-container ks-calculator-inject hide"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

下面是没有（'ks-chart-container'）的容器。

<div class="product-block-list__item product-block-list__item--content size__chart">
  <div class="card">
    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43">
      <span class="card__title heading h3">Size chart</span>
      <span class="plus-button plus-button--large"></span>
    </button>
    <div id="block-template--14697163096134__main-092edfe6-4684-4f51-970d-dfb11469ca43" class="card__collapsible" style="height: 0px;">
      <div class="card__collapsible-content">
        <div class="rte text--pull">
          <div id="KiwiSizingChart" class=" kiwiSizingLoaded"></div>
        </div>
      </div>
    </div>
  </div>
</div>

我尝试使用：
.ks-chart-container:empty .product-block-list__item.product-block-list__item--content.size__chart { display: none; }
但没有工作。（原谅我的编码，我是一个初学者）。

css

来源：https://stackoverflow.com/questions/74520574/hide-main-div-when-a-specific-class-is-not-found-with-plain-javascript

2条答案

按热度按时间

a14dhokn1#

实际上，不可能使用CSS根据其子元素来设计元素的样式。
您可以使用一些普通的Javascript（而不是jQuery）来实现这一点，使用**.ks-chart-container类获取所有元素并设置CSS属性 display：none 在其父元素上使用.product-block-list__item**类：

for (const ksChart of document.querySelectorAll('.ks-chart-container')) {
  ksChart.closest('.product-block-list__item').style.display = 'none';
}

如果你不想使用Javascript，根据你使用的编程语言，框架等，检查你的模板，如果**.ks-chart-container**存在，然后，显示代码或不取决于它。也许这是最好的选择...

赞(0）回复(0）举报 2022-11-27

unhi4e5o2#

您可以通过使用**querySelectorAll方法来实现此目的，该方法返回指定选择器的节点列表。
将querySelectorAll与ks-chart-container类一起使用来分配变量。可以通过查看querySelectorAll**返回的length属性来确定页面是否包含指定的类名。
如果页面不包含ks-chart-container类，它将返回length值0。如果是这样，请隐藏主div。
如果页面上已经存在ks-chart-container类，则length值将大于0，并且您可以将主div保留在视图中。
运行下面的代码片段来查看它的运行情况。我在代码中添加了注解来帮助您理解。
如果这对您有帮助，或者您有任何疑问，请告诉我。
第一个

赞(0）回复(0）举报 2022-11-27

我来回答

css 使用纯JavaScript找不到特定类时隐藏主div

2条答案

相关问题

热门标签

最新问答