Estoy tratando de ocultar o mostrar un div dependiendo de si tiene una clase coincidente con el contenido.
En este ejemplo, la clase llamada 'Países' contiene el texto 'EE.UU.'. Me gustaría mostrar el div 'resultado de búsqueda' si tiene 'EE. UU.' en la clase llamada 'País'.
Aquí está mi intento. Oculta el div 'País' si elimino esto
document.querySelectorAll(".search-result").forEach((z) => {y cambio ? (z.style.display = "bloquear") : (z.style.display = "ninguno");
a y.style.display
pero necesito ocultar el div general.
¿Alguien puede ayudar por favor?
<html> <head> <style></style> <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script> </head> <body> <div class="Countries">USA</div> <div class="search-result"> <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div> <div>The body of the result</div> </div> <div class="search-result"> <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div> <div>The body of the result</div> </div> <div class="search-result"> <div class="Country d-none">Canada, Bolivia, Paraguay</div> <div>The body of the result - you should not see this one</div> </div> <div class="search-result"> <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div> <div>The body of the result</div> </div> <div class="search-result"> <div class="Country d-none">Canada, Bolivia, Paraguay</div> <div>The body of the result - you should not see this one</div> </div> <script type="text/javascript"> document.querySelectorAll(".Countries").forEach((x) => { document.querySelectorAll(".Country").forEach((y) => { document.querySelectorAll(".search-result").forEach((z) => { y.innerText.includes(x.innerText) ? (z.style.display = "block") : (z.style.display = "none"); }); }); }); </script> </body> </html>Dado que ya usa className d-none , no use z.style.display = "none|block"
Utilice en su lugar z.classList.toggle("d-none", !isMatch) donde isMatch es un valor booleano dado que se encontró el texto. Use String.prototype.includes() para el caso.
Más información: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Ejemplo:
// UTILITY functions const EL = (sel, PAR) => (PAR||document).querySelector(sel); const ELS = (sel, PAR) => (PAR||document).querySelectorAll(sel); const trimLCase = (str) => str.trim().toLowerCase(); // APP const EL_search = EL("#search"); const filterResults = () => { // Get the search value const search = trimLCase(EL_search.value); // Filter search results! ELS(".search-result").forEach(EL_result => { const EL_country = EL(".Country", EL_result); const content = trimLCase(EL_country.textContent); const isMatch = content.includes(search); EL_result.classList.toggle("d-none", !isMatch); }); }; // INIT, EVENTS EL_search.addEventListener("input", filterResults); filterResults(); /* Utility classes */ .d-none { display: none; } Search: <input id="search" value="USA" type=search autocomplete=off> <div class="search-result"> <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div> <div>1. The body of the result U,C,B,P</div> </div> <div class="search-result"> <div class="Country d-none">USA, Canada, Paraguay</div> <div>2. The body of the result U,C,P</div> </div> <div class="search-result"> <div class="Country d-none">Canada, Bolivia, Paraguay, Guatemala</div> <div>3. The body of the result C,B,P,G</div> </div> <div class="search-result"> <div class="Country d-none">USA, Paraguay, Guatemala</div> <div>4. The body of the result U,P,G</div> </div> <div class="search-result"> <div class="Country d-none">Bolivia, Paraguay</div> <div>5. The body of the result B,P</div> </div> Arriba, ya que usé un <input> para la demostración, en lugar de
const search = EL_search.value.trim().toLowerCase();para su caso específico, es posible que desee utilizar:
const search = EL(".Country").textContent.trim().toLowerCase(); pero no tiene sentido optar por algunos elementos de clase como .Country , ya que más adelante, durante el desarrollo, podría dar lugar a falsos positivos.
<html> <head> <style></style> <script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script> </head> <body> <div class="Countries">USA</div> <div class="search-result"> <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div> <div>The body of the result</div> </div> <div class="search-result"> <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div> <div>The body of the result</div> </div> <div class="search-result"> <div class="Country d-none">Canada, Bolivia, Paraguay</div> <div>The body of the result - you should not see this one</div> </div> <div class="search-result"> <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div> <div>The body of the result</div> </div> <div class="search-result"> <div class="Country d-none">Canada, Bolivia, Paraguay</div> <div>The body of the result - you should not see this one</div> </div> <script type="text/javascript"> const countries = document.querySelector(".Countries"); const searchResults = document.querySelectorAll(".search-result"); for(let i = 0; i < searchResults.length; i++) { if(countries.innerText !== searchResults[i].innerText) { searchResults[i].parentNode.style.display = "none" } else { searchResults[i].parentNode.style.display = "block" } } </script> </body> </html>