當標題下面的內容不可見時如何隱藏標題

我有一個 JavaScript 應用程式，其中包含很長的“日專案”串列，由指定月份的標題分隔，如下所示：

<h3>January 2022</h3>
<div class="item" data-visitors='1'>2022-01-01</div>
<div class="item" data-visitors='0'>2022-01-02</div>
<div class="item" data-visitors='1'>2022-01-03</div>
...etc until
<div class="item" data-visitors='15'>2022-01-31</div>

<h3>February 2022</h3>
<div class="item" data-visitors='0'>2022-02-01</div>
<div class="item" data-visitors='1'>2022-02-02</div>
<div class="item" data-visitors='19'>2022-02-03</div>
...etc until
<div class="item" data-visitors='0'>2022-02-28</div>

<h3>March 2022</h3>
<div class="item" data-visitors='0'>2022-03-01</div>
<div class="item" data-visitors='11'>2022-03-02</div>
<div class="item" data-visitors='5'>2022-03-03</div>
...etc until
<div class="item" data-visitors='2'>2022-03-28</div>

專案數量約為 6.500 條，標題為 200 條左右。我故意不在這里寫我的代碼，因為它很亂，在我看來無關緊要。這里有趣的是生成的 DOM。

在（vanilla）JavaScript 中使用過濾器，根據data-visitors值我將一些 div 更改為style.display='none'. 例如，所有具有類 'item' 且data-visitors值低于 15 的 div 將獲得一個style.display='none'.

這實際上會使 html 檔案的視圖看起來像這樣

2022 年 1 月

2022 年 2 月

2022-02-03

2022 年 3 月

在這里，我想隱藏“2022 年 1 月”和“2022 年 3 月”標題（h3），因為它們沒有可見的專案（HTML-div 仍然存在，但如前所述，帶有display:none）。在我的申請中，這個串列的范圍從 2004 年到 2022 年，所以有很多空月。

我的問題：當月份標題下方不再可見內容時，如何隱藏它們？

由于這些串列是如何動態創建的：

我能做什么：將類、ID、資料屬性等添加到 h3 月的標題和 div 中

我不能做什么：將 h3 和 div 包裝在一個包裝 div 中，或者在所有<div class='item'>.

我的結論，我不是一個經驗豐富的 JavaScript 程式員： div 不是 h3 的孩子，所以我不能使用類似的東西。兄弟姐妹也不會作業。

用偽代碼思考，我會想象id='2022-02'在 h3-tag 上放一個，data-attr-year-month-item='2022-02'在 div 上放一些。然后，查詢類似（這只是組成代碼）：

if ((document.querySelectorAll("[attr-year-month-item='2022-02']").display=='none').length == (document.querySelectorAll("[attr-year-month-item='2022-02']").length)) {

document.getElementById('2022-02').style.display='none'

}

也就是說，如果 style.display='none' 的 div 的長度等于該月所有 div 的長度，那么標題應該被隱藏。

我需要幫助的是，我如何在vanilla JavaScript 中撰寫這個 if 陳述句以便它作業？

uj5u.com熱心網友回復：

您可能會從底部到頂部遍歷專案，檢查是否h3隱藏了所有組之后，然后隱藏h3：

let hideH3 = true;
[...document.querySelectorAll('.item')].reverse()
.forEach(i => {
  const hide = i.dataset.visitors < 15;
  hideH3 &= hide;
  if (hide) i.classList.add('hidden');
  const next = i.previousElementSibling;
  if (next.nodeName == 'H3') {
    if (hideH3) next.classList.add('hidden');
    else hideH3 = true;
  }
});

.hidden {display:none}

<h3>January 2022</h3>
<div class="item" data-visitors='1'>2022-01-01</div>
<div class="item" data-visitors='0'>2022-01-02</div>
<div class="item" data-visitors='1'>2022-01-03</div>

<h3>February 2022</h3>
<div class="item" data-visitors='0'>2022-02-01</div>
<div class="item" data-visitors='1'>2022-02-02</div>
<div class="item" data-visitors='19'>2022-02-03</div>
<div class="item" data-visitors='0'>2022-02-28</div>

<h3>March 2022</h3>
<div class="item" data-visitors='0'>2022-03-01</div>
<div class="item" data-visitors='11'>2022-03-02</div>
<div class="item" data-visitors='5'>2022-03-03</div>
<div class="item" data-visitors='5'>2022-03-28</div>

uj5u.com熱心網友回復：

您必須以編程方式設定可見性，所以為什么不這樣做呢？就像是

let element = document.getElementByID('firsth3');
let h3 = element;
while ( element.id != 'lastdiv' ) {
  element = element.nextElementSibling;
  if ( element.tagName == 'H3' ) {
    h3 = element;
  } else if ( element.dataset.visitors > 15 ) {
    element.styyle.display = 'block';
    h3.style.display = 'block';
  }
}

在這里你給所有東西一個顯示：最初沒有，并用 id 標記第一個和最后一個元素。

標籤：javascript html dom

上一篇：使用Deno編譯時如何使用來自lib.dom.d.ts的型別？

下一篇：使用DOM操作css可見性