隐藏 <dt>当 div 不显示时

问题描述 投票：0回答：1

我希望当

<dt>
内所有具有“conteudoGuia”类的div都是
display: none
时，
<dt>
收到
display: none

有人可以帮我解释一下吗？

我尝试了很多替代方案，但没有得到答案。

    const searchInput = document.getElementById('searchBox');

    searchInput.addEventListener('input', function () {
      const searchTerm = searchInput.value.trim().toLowerCase();
      const contentElements = document.getElementsByClassName('conteudoGuia');

      for (let i = 0; i < contentElements.length; i++) {
        const titleElement = contentElements[i].querySelector('.tituloGuia');
        const descriptionElement = contentElements[i].querySelector('.descricaoGuia');
        const boldTags = contentElements[i].getElementsByTagName('b');

        let matchFound = false;

        for (let j = 0; j < boldTags.length; j++) {
          const wordInTag = boldTags[j].textContent.trim().toLowerCase();
          if (wordInTag.includes(searchTerm)) {
            matchFound = true;
            break;
          }
        }

        if (matchFound) {
          titleElement.style.display = '';
          descriptionElement.style.display = '';
        } else {
          titleElement.style.display = 'none';
          descriptionElement.style.display = 'none';
        }
      }
    });
<html>
<head>
  <title>Hello, World!</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <dl class="box">
    <div id="searchDiv" class="searchDiv">
      <input type="text" id="searchBox" name="searchText" class="searchBox" placeholder="Oque você está procurando?" />
      
    </div>

    <dt>TESTE DT 1</dt>
    <dd>
      <div id="autorizacao">
        <div class="conteudoGuia">
          <div class="tituloGuia">
            <p><b>Titulo Primeiro </b></p>
          </div>
          <div class="descricaoGuia">
            <p>
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            </hr>
          </div>
        </div>
      </div>
    </dd>

    <dt>TESTE DT 2</dt>
    <dd>
      <div id="financeiro">
        <div class="conteudoGuia">
          <div class="tituloGuia">
            <p><b>Titulo Segundo </b></p>
          </div>
          <div class="descricaoGuia">
            <p>
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            </hr>
          </div>
        </div>
      </div>
    </dd>
  </dl>
</body>

javascript html hide dt
1个回答
0
投票

首先，你的代码有一个错误： 

</hr>
应该是 
<hr>
。

那么执行此操作的方法是简单地循环 dt 内的每个 div 并检查显示属性。如果全部都有display:none，也隐藏dt

const searchInput = document.getElementById('searchBox');

searchInput.addEventListener('input', function() {
  const searchTerm = searchInput.value.trim().toLowerCase();
  const contentElements = document.getElementsByClassName('conteudoGuia');

  for (let i = 0; i < contentElements.length; i++) {
    const titleElement = contentElements[i].querySelector('.tituloGuia');
    const descriptionElement = contentElements[i].querySelector('.descricaoGuia');
    const boldTags = contentElements[i].getElementsByTagName('b');

    let matchFound = false;

    for (let j = 0; j < boldTags.length; j++) {
      const wordInTag = boldTags[j].textContent.trim().toLowerCase();
      if (wordInTag.includes(searchTerm)) {
        matchFound = true;
        break;
      }
    }

    if (matchFound) {
      titleElement.style.display = '';
      descriptionElement.style.display = '';
    } else {
      titleElement.style.display = 'none';
      descriptionElement.style.display = 'none';
    }
  }

  // Check if all the content elements are hidden, and if so, hide the corresponding <dt>
  const dtElements = document.getElementsByTagName('dt');
  for (let i = 0; i < dtElements.length; i++) {
    const contentElementsInsideDt = dtElements[i].getElementsByTagName('div');
    let allContentHidden = true;

    for (let j = 0; j < contentElementsInsideDt.length; j++) {
      if (contentElementsInsideDt[j].classList.contains('conteudoGuia') &&
        contentElementsInsideDt[j].style.display !== 'none') {
        allContentHidden = false;
        break;
      }
    }

    if (allContentHidden) {
      dtElements[i].style.display = 'none';
    } else {
      dtElements[i].style.display = '';
    }
  }
});
<body>
  <dl class="box">
    <div id="searchDiv" class="searchDiv">
      <input type="text" id="searchBox" name="searchText" class="searchBox" placeholder="Oque você está procurando?" />
    </div>

    <dt>TESTE DT 1</dt>
    <dd>
      <div id="autorizacao">
        <div class="conteudoGuia">
          <div class="tituloGuia">
            <p><b>Titulo Primeiro </b></p>
          </div>
          <div class="descricaoGuia">
            <p>
              Some text
            </p>
            <hr>
          </div>
        </div>
      </div>
    </dd>

    <dt>TESTE DT 2</dt>
    <dd>
      <div id="financeiro">
        <div class="conteudoGuia">
          <div class="tituloGuia">
            <p><b>Titulo Segundo </b></p>
          </div>
          <div class="descricaoGuia">
            <p>
              Some other text
            </p>
            <hr>
          </div>
        </div>
      </div>
    </dd>
  </dl>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.