如果父div沒有子項顯示，則顯示某個不同的子div

Question

我看到類似的問題：如果沒有孩子，則隱藏父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，以便顯示一些更有趣的內容，例如公司徽標。

（我知道即使有房間顯示，我也可以在父母身上貼上compnay徽標，但我只希望它在沒有房間的情況下顯示）

我可以用什么來實現這一目標？

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的同級對象。 默認情況下，占位符是可見的，但是如果找到具有 .room且沒有.hidden的同級兄弟，它將退回到不顯示任何內容。

請注意，這要求占位符div始終是其父級的最后一個子級。 由於~選擇器僅檢查下一個同級，而不檢查上一個。

Answer 2

我會像這樣：

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

和

.showLogo{
  visibility: visible;
  background-image: url(...);
}

在allRoomStatusAreTaken()您必須檢查是否已占用所有房間。 我會使用Lodash的 every函數：

function allRoomStatusAreTaken() {
  return every(allRooms, room => room.status === "Taken");
}

Answer 3

您可以默認隱藏徽標，如果隱藏了房間，則可以使用js更改display 。 例：

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

 .Parent { width: 100%; margin-top: 4px; overflow: auto; } .showRooms { visibility: visible; background-color: green; } .hideRooms { visibility: hidden; } .logo { display: none; width: 200px; height: 200px; background: red; } .logo.show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Parent"> <div class="logo"> </div> </div> 

Answer 4

只需將Logo div的類為'companyLogo'保留在父類中，並使用以下CSS即可使用。

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

有關更具體的答案，請提供HTML結構。

Answer 5

當父母空閑時，您必須使用附加將所需的任何內容添加到父母

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

Answer 6

您可以將徽標包裹在某些div中（或其他任何名稱，或者可以在徽標圖像中添加一個類，實際上什么都可以），默認情況下，該類將具有一個“隱藏”類，將其隱藏，然后您也可以顯示此類如果您沒有房間，例如：

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

```