Creé un componente de carrusel de álbumes que cambiará entre dos álbumes al hacer clic el usuario. Hay dos divs de álbumes y las clases currAlbum y hiddenAlbum para identificar el álbum actual y el oculto respectivamente. Estoy usando JQuery para cambiar las dos clases cada vez que se cambian los álbumes. Pero la función removeClass no funciona y las clases existentes no se eliminan. Estoy mostrando los fragmentos de código relevantes
<!-- Viewer to display photos of the album --> <div class="viewer currAlbum"> <img src="./src/assets/images/gallery-images/dc.jpg" class="album-image"> <img src="./src/assets/images/gallery-images/gconvo.jpg" class="album-image"> <img src="./src/assets/images/gallery-images/bconvo.jpg" class="album-image"> <img src="./src/assets/images/gallery-images/sconvo.jpg" class="album-image"> </div> <div class="viewer hiddenAlbum"> <img src="./src/assets/images/gallery-images/cs.jpg" class="album-image"> <img src="./src/assets/images/gallery-images/ee.jpg" class="album-image"> <img src="./src/assets/images/gallery-images/mech.jpg" class="album-image"> <img src="./src/assets/images/gallery-images/btech14-18ch.jpg" class="album-image"> <img src="./src/assets/images/gallery-images/btech14-18ce.jpg" class="album-image"> </div>
JavaScript:
$('.scroller .album').click((e) => { $('.scroller .album').unbind(); $('.scroller .album.active').removeClass('active'); $('.viewer.currAlbum').removeClass('.currAlbum').addClass('hiddenAlbum'); //getting issue here $('.viewer.hiddenAlbum').removeClass('.hiddenAlbum').addClass('currAlbum'); //getting issue here $(e.currentTarget).addClass('active'); album_images = {} $('.currAlbum .album-image').each((i, el) => { album_images[i] = el; }); num = Object.keys(album_images).length; prev = num - 1; active = 0; next = 1; slider(); init_carousel(prev, active, next); })
Por favor, alguien que me ayude a averiguar mi error.
Ok, parece que cometí un error lógico como lo señaló Andreas en los comentarios. el codigo correcto sera
$('.viewer.currAlbum').removeClass('currAlbum').addClass('temp'); $('.viewer.hiddenAlbum').removeClass('hiddenAlbum').addClass('currAlbum'); $('.viewer.temp').removeClass('temp').addClass('hiddenAlbum');