Tengo un campo de entrada y un montón de contenedores que contienen múltiples atributos data , ¿cómo muestro/oculto dinámicamente los contenedores según el valor de la entrada? Por ejemplo, si el valor de la entrada de búsqueda es "frontend", solo debe mostrar contenedores que tengan data-role: frontend , lo mismo ocurre con el resto.
<input type="search"> <div class="container" data-role="Fullstack" data-level="Midweight" data-languages="JavaScript Rub" data-tools="Sass"> <div></div> </div> <div class="container" data-role="Backend" data-level="Junior" data-languages="Ruby" data-tools="RoR"> <div></div> </div>Me gustaría que estuviera en jQuery.
Primero, hágalos todos ocultos, por ejemplo, con la propiedad de visibilidad de css y luego, en el desenfoque/cambio de entrada, llame a una función como esta
$('div[id^=proto_]').filter('div[data-role=frontend]').css('visibility','visible'); También debe agregar una identificación a todos los elementos para obtenerlos. en mi ejemplo, agregué algunas identificaciones que comienzan con proto_ .