dt 相关问题

我希望当内所有带有“conteudoGuia”类的div都显示：无时，接收显示：无有人可以帮助我并解释一下吗？我尝试了很多替代方案并且... 我希望当<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> 首先，你的代码有一个错误： </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>

javascript html hide dt

回答 1 投票 0

表格标题出现在错误的地方

我正在使用 DT 0.28，当我指定标题参数时： DT::数据表（ gps$summary[], extension = "按钮", 标题 = tagList(h1("标题")), 选项 =

shiny dt caption

回答 0 投票 0

在闪亮的应用程序中动态创建可编辑的 DT

我想创建一个具有以下流程的应用程序：用户选择一些数据组这些组成为动态选项卡，每个选项卡都包含一个子集可编辑的 DT 以及各自的...

r shiny reactive dt

回答 2 投票 0

闪亮的数据表行组操作按钮折叠/展开

我设计了一个基本的 Shiny App，包括一个带有 rowGroup 参数的数据表。现在，我想添加一个 actionButton() ，它会在按下按钮时折叠/展开数据表的所有行。当前...