javascript - 如果父 div 没有显示子项，则显示某个不同的子 div

Question

我看到了关于在没有子项时隐藏父 div 的类似问题，但如果没有其他子项，我找不到如何在父项中显示不同的 div。

我有一个更新了免费 session 室的父 div:

.Parent{
    width: 100%;
    margin-top: 4px;
    overflow: auto;
}

如果有空闲房间，它会显示在板上(在父级中)。这是在 JS 中完成的，如下所示:

$('#Parent').addClass("showRooms");    

如果默认情况下房间不是空闲的，则它是隐藏的:

if(roomStatus == "Taken"){
    $('#Parent').addClass("hideRooms");    
}

css 类如下:

.showRooms{
    visibility: visible;
    background-color: green;
}
.hideRooms{
    visibility:hidden;
}

当所有房间都被隐藏时，有一个空白板，我想在父级中显示一个不同的子 div，这样我就可以显示更有趣的东西，例如公司标志。

(我知道即使有房间显示我也可以在父级上显示 compnay Logo ，但我只希望它在没有空闲房间时显示)

我可以使用什么来实现这一目标？

Answer 1

是的!

我想出了一个纯 CSS 解决方案，因为组合选择器很棒:

考虑以下设置:

.container {
  margin: 10px;
  border: 1px solid #000;
}

.room {
  width: 100px;
  height: 75px;
  background-color: #F00;
}

.hidden {
  display: none;
}

.placeholder {
  display: block;
}

.room:not(.hidden) ~ .placeholder {
  display: none;
}

<div class="container">
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="room hidden"></div>
  <div class="placeholder">No rooms available!</div>
</div>
		
<div class="container">
  <div class="room hidden"></div>
  <div class="room"></div>
  <div class="room"></div>
  <div class="room hidden"></div>
  <div class="placeholder">No rooms available!</div>
</div>

现在的魔力在于以下几行:

.room:not(.hidden) ~ .placeholder {
    display: none;
}

说明:

取一个占位符，它是不包含 .hidden 类的 .room 的兄弟。默认情况下，占位符是可见的，但如果它可以找到有没有.hidden 的 .room 的同级，它将返回到不显示。

请注意，这要求占位符 div 始终是其父元素的最后一个子元素。因为 ~ 选择器只检查下一个 sibling ，而不是前一个。