Alternar visibilidad o visualización de objetos.

Tengo un grupo de objetos con filtros de datos para buscar y filtrar. JavaScript alterna la visibilidad de los objetos para que la búsqueda y el filtrado se realicen.

Tengo algunos elementos de título que solo deberían aparecer cuando se selecciona su tema. Por ejemplo, si el usuario elige el tema # 3, los resultados para el tema # 3 deben mostrarse con el título para el tema # 3. Si realizo una búsqueda, el título debería decir “resultados de búsqueda”.

Donde estoy perdido: la galería comienza con todos los objetos y títulos de sección en su lugar. Los títulos de la sección deben estar ocultos hasta que se seleccione su tema de la sección. Tengo clase “filtro” para todos los elementos visibles. Si los comienzo con visibilidad: oculto; nunca aparecen. Si no les doy visibilidad: oculto; nunca se van Mi función es mostrar y ocultar “todos” cuando necesito alternar estos elementos individuales independientemente del filtro principal.

Aquí hay un violín que muestra todos los títulos en la carga de la página, y cuando escribe o hace clic en “todos”. El único título que se muestra en estos casos debe ser “Todos los resultados”.

https://jsfiddle.net/ewebster/Lxveeq65/43/

El JavaScript:

$(document).ready(function () { //declare a global variable var filterVal; //check if sessionStorage exists and if so, if there is a var called fillTerm //if not, set it to a default value (all) if (sessionStorage && sessionStorage.getItem("filTerm")) { filterVal = sessionStorage.getItem("filTerm"); } else { filterVal = "all"; sessionStorage.setItem("filTerm", filterVal); } //now let's attach some interaction to our buttons $(".filter-button").on("click", function () { //get the value for our filter filterVal = $(this).attr("data-filter"); //store it in the session storage sessionStorage.setItem("filTerm", filterVal); console.log(sessionStorage); console.log(filterVal); //call our view update function updateView(); }); $("#searchBtn").on("click",function(){ filterVal = $('#searchEntry').val(); sessionStorage.setItem("filTerm", filterVal); updateView(); }); $("#searchEntry").on("keypress",function(e){ if (e.keyCode == 13) { filterVal = $('#searchEntry').val(); sessionStorage.setItem("filTerm", filterVal); updateView(); } }); //this is the function that manipulates the UI function updateView() { //default situation: all is visible if (!filterVal || filterVal === "all") { $('.filter').show(); } //hide all and show filtered values else { $(".filter").hide(); $('.filter').filter('.' + filterVal).show(); console.log("searchTerm"); console.log("filterVal"); } }; //update the view when the page loads updateView(); }); 

Una regla de propiedad para display debe escribirse en la clase CSS .hidden . Sin embargo, esto no es suficiente por especificidad. Es posible que debas envolver los títulos en otro div con id para solucionar esto .

Si no te opones al uso de !important , tienes una solución como esta.

Las referencias de sessionStorage se eliminan por brevedad y falta de soporte aquí.

 $(document).ready(function() { var filterVal = "all"; $(".filter-button").on("click", function() { filterVal = $(this).attr("data-filter"); updateView(); }); function updateView() { //default situation: all is visible $('.filter').addClass('hidden'); $('.' + filterVal).removeClass('hidden'); }; updateView(); }); 
 body { font-family: arial; font-size: small; } .item { height: 60px; width: 50px; padding: 10px; margin: 10px; background-color: grey; text-align: center; color: white; overflow: wrap; float: left; } ul { list-style-type: none; margin-left: -35px; } li { display: inline; } .filter-button { width: 50px; margin-bottom: 5px; } .filter-button:hover { text-decoration: underline; color: blue; cursor: pointer; } .hidden { display: none !important; visibility: hidden; } 
    
All of Them
Big and Tall
Short and Small
Big and Short
Tall and Small
Big and Few
Many and Small
Few and Small
Short and Small and Few
Big and Tall and Many