Supongamos que tienes una barra superior sobrecargada y que quieres eliminar alguno o algunos de los elementos que se muestran por el motivo que sea. Una barra parecida a la que mostramos en la imagen siguiente.
Como cambiar entre elementos con un click del ratón, sin que haya que tener en cuenta el número de elementos que tenemos o si mas tarde se añaden o quitan nuevos elementos.
Un ejemplo:(Click encima de la imagen)
Para hacer esot tenemos que tener en cuenta los siguientes puntos:
Los elementos han de tener una estructura casi idéntica a en el nombre que le demos a los ids; esto es que todos los elementos tienen que tener el mismo nombre y finalizando el nombre con un número consecutivo. Por ejemplo si metemos tres elementos, ya sean imágenes, textos, divs.... los ids serían: laImagen-1, laImagen-2, laImagen-3 ........ y empezando por el número 1 para facilitar la programación.
Todos los elementos tendrán una clase CSS en común, y es esta clase establecemos el display en none.
En el elemento que pretendemos se muestre por defecto como visible le añadimos una clase y en esta clase le ponemos el display en flex o block (cualquiera de los dos)
Añadimos un elemento Code Block y en la sección de JavaScript pegamos el siguiente código:
jQuery(document).ready(function ($) {
if (window.angular) return;
const todos = document.querySelectorAll(".imagen-oculta");
window.addEventListener("click", (evento) => {
if (evento.target.classList.contains("imagen-oculta")) {
for (let i = 0; i < todos.length; i++) {
todos[i].classList.remove("imagen-activa");
}
let objetivo = evento.target.id.substr(-1);
let maximo = todos.length;
objetivo++;
if (objetivo > maximo) {
objetivo = 1;
}
document.querySelector("#laImagen-" + objetivo).classList.add("imagen-activa");
}
});
});
Click para Copiar
Copiado
imagen-oculta : Es la clase común a todos los elementos y en la que establecemos el display en none
imagen-activa : Es la clase que le damos al elemento que de entrada queremos que se muestre visible y en la que establecemos el display en flex o box, cualquiera de los dos.
#laImagen- : Corresponde al ID de todas y cada una de los elementos que queremos manipular, nótese que se omite el número , solamente el número y que en el código JavaScript va precedido por el símbolo #
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌