在普通JavaScript中找不到特定类时隐藏主div

Question

我试图隐藏主div ('product-block-list__item product-block-list__item——content size__chart')当类('ks-chart-container')不在页面中。

(不使用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; }

但没有工作。(请原谅我的编码，我是初学者)。

Answer 1

实际上，我们不可能用CSS来根据一个元素的子元素来设计它的样式。

您可以使用一些普通Javascript(不是jQuery)来实现这一点，使用.ks-chart-container获取所有元素类，并使用.product-block-list__item在父元素上设置CSS属性display: none类:

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

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

Answer 2

您可以通过使用querySelectorAll来实现这一点方法，返回指定选择器的Nodelist。

使用querySelectorAll为变量赋值ks-chart-container级。您可以通过查看querySelectorAll返回的length属性来确定页面是否包含指定的类名.

如果页面不包含ks-chart-container类，它将返回length值0。如果是，隐藏主div。

如果页面上已经存在ks-chart-container类，则length的值将大于0，并且可以保留主div。

运行下面的代码片段，看看它是如何工作的。我在代码中添加了注释以帮助您理解。

请让我知道这是否有帮助，或者如果你有问题。

//declare variable for div with class 'ks-chart-container' using querySelectorAll
var ksChartContainer = document.querySelectorAll('.ks-chart-container');

//declare variable for main div that you want to hide
var mainDiv = document.querySelector('.product-block-list__item.product-block-list__item--content.size__chart')

//this is a function will look for the 'ks-chart-container' div, if the div doesn't exist, it will hide the mainDiv
function hideMainDiv() {
//if length property of ksChartContainer is less than 1, hide the main div
if (ksChartContainer.length < 1) {
console.log('ks-chart-container class does not exist on the page')
mainDiv.style.display = 'none'
//if length property of ksChartContainer is greater than 0, keep the main div in view
} else if ((ksChartContainer.length > 0)) {
mainDiv.style.display = 'block'
console.log('ks-chart-container class exists on the page')
}
}

<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>
<!--The section below is for example purposes-->
<br/><br/><br/>
<div>
<p>Click the button below to run the hideMainDiv function. If the "ks-chart-container" class isn't found on the page, the main div will be hidden.</p>
<button onclick="hideMainDiv()">Click</button>
</div>