Estoy usando JavaScript para ocultar y mostrar algunos elementos al hacer clic en eventos
Usando este código
function showPreOne() { document.getElementById('SecandModalFilter').classList.add('d-none'); document.getElementById('FirstModalFilters').classList.add('d-none'); document.getElementById('colocation').classList.add('d-none'); document.getElementById('coloc-row').classList.add('d-none'); document.getElementById('preFirstModalFilter').classList.remove('d-none'); document.getElementById('FirstModalFiltersa').classList.add('d-none'); }¡No creo que esta sea la forma correcta! ? especialmente si tengo una página muy grande con muchas pestañas y elementos?
Gracias
Puede agregar una clase en todos los elementos que se pueden ocultar (supongo que está manejando un sistema de pestañas) y solo mostrar el que desea que sea visible:
function showPreOne() { document.querySelectorAll('.tab').forEach(elt => elt.classList.add('d-none')) document.querySelector('#SecandModalFilter').classList.remove('d-none'); }De lo contrario, su método actual no está mal por decir.
Si la clase es display: none , no hay nada de malo en ese enfoque. Aunque el código sería más fácil de mantener si administrara agregar/eliminar elementos con matrices de identificadores en lugar de hacerlo línea por línea.
Su enfoque puede ser un poco mejor, si está mostrando/ocultando elementos, le sugiero que use la función de alternancia. De esta manera, puede usar solo una función que administrará su evento de clic y ocultará/mostrará sus elementos, solo asegúrese de que el estado inicial (d-ninguna clase presente o no) sea correcto:
function showHide() { document.getElementById('SecandModalFilter').classList.toggle('d-none'); document.getElementById('FirstModalFilters').classList.toggle('d-none'); document.getElementById('colocation').classList.toggle('d-none'); document.getElementById('coloc-row').classList.toggle('d-none'); document.getElementById('preFirstModalFilter').classList.toggle('d-none'); document.getElementById('FirstModalFiltersa').classList.toggle('d-none'); }Más información aquí Alternar especificación