Cambiar entre elementos con un click - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Cambiar entre elementos con un click

¿Cómo puedes hacerlo?

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)

guardar contenidovideo reunion motionjavascript tip tarjeta

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
img-9
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. 👌
0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
img-12
Añadir lightbox "Facilmente"

El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.

Leer más
img-13
Imagen de Fondo Archivo de Categorías

Vamos a tratar de como añadir un encabezado con la imagen predeterminada para el archivo de categorías, cada categoría tendrá su imagen predeterminada.
Para esto solo se necesita de un plugin gratuito, aunque también se puede hacer con otros como por ejemplo el HappyFiles.

Leer más
img-14
Botón de Todos los Templates

Se echa de menos un botón que estando en la sección "Edit Template" nos lleve directamente a la página de Templates que es donde se muestra todo el listado de plantillas de Oxygen, parece que alguien se ha olvidado de este detalle que debería estar implementado nativamente y a veces hasta fastidia un poco tener que cargar dos páginas para llegar ahí estando en la sección de edición de template.

Leer más