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

我看到了一些类似的问题，关于在没有子对象的情况下隐藏父div，但是在没有其他子对象的情况下，找不到如何在父对象中显示不同的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，以便显示更有趣的内容，例如公司徽标

（我知道即使有房间显示，我也可以在家长身上有康普奈标志，但我只想在没有免费房间时显示）

---

我可以用什么来实现这一点呢？

我可以这样做：

if(allRoomStatusAreTaken()){
  $('#Parent').addClass("showLogo");
} else {
  $('#Parent').removeClass("showLogo");
}

及

在

allroomstatusareaked（）

中，您必须检查是否所有房间都已入住。我会使用一个函数，如

every

from:

---

默认情况下，您可以隐藏徽标，如果房间被隐藏，则可以使用js更改

显示。例如：


$（函数（）{
var roomStatus=“take”；
如果（roomStatus==“take”）{
$（'#Parent'）.addClass（“hideRooms”）；
$（'.logo'）.addClass（'show'）；
} 
})
.Parent{
宽度：100%；
利润上限：4倍；
溢出：自动；
}
.陈列室{
能见度：可见；
背景颜色：绿色；
}
希德罗姆斯先生{
可见性：隐藏；
}
.标志{
显示：无；
宽度：200px；
高度：200px；
背景：红色；
}
.logo.show{
显示：块；
}
只需将Logo div和类“companyLogo”保留在parent中，并使用以下CSS即可

.hideRooms .companyLogo{
visibility:visible;
}
.showRooms .companyLogo{
visibility:hidden;
}

要获得更具体的答案，请提供HTML结构。
当家长空闲时，您必须使用append向家长添加任何您想要的内容

if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");    
$("#Parent").append("<span>somthing to show</span>");
}

if（roomStatus==“take”）{
$（'#Parent'）.addClass（“hideRooms”）；
$（“#Parent”）.append（“somthing to show”）；
}
是！
我提出了一个纯CSS解决方案，因为组合选择器非常棒：

请考虑以下设置：


.container{
利润率：10px；
边框：1px实心#000；
}
.房间{
宽度：100px；
高度：75px；
背景色：#F00；
}
.隐藏{
显示：无；
}
.占位符{
显示：块；
}
.room:未（.hidden）~.占位符{
显示：无；
}

没有空房了！
没有空房了！
您可以将徽标包装在某个div中（或其他任何内容，或者您可以向徽标图像添加一个类，真的是任何内容），默认情况下，该类将具有一个“隐藏”类，该类将隐藏该徽标，然后您还可以在没有房间时显示该徽标，例如：

if(roomStatus == "Taken") {
    $('#Parent').addClass("hideRooms");
    $('.logo').addclass("visible");
    $('.logo').removeClass("hidden");
} else {
    $('#Parent').addClass("showRooms");
    $('.logo').removeClass("visible");
    $('.logo').addClass("hidden");
}

```
您可以检查$（“#parent.showroom”）.length，如果它等于0，则显示徽标
if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");    
$("#Parent").append("<span>somthing to show</span>");
}

if(roomStatus == "Taken") {
    $('#Parent').addClass("hideRooms");
    $('.logo').addclass("visible");
    $('.logo').removeClass("hidden");
} else {
    $('#Parent').addClass("showRooms");
    $('.logo').removeClass("visible");
    $('.logo').addClass("hidden");
}