Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

49
Vistas
Unable to remove a HTML5 class using JQuery

I have made an album carousel component which will switch between two album on user click. There are two album divs and the classes currAlbum and hiddenAlbum to identify the current and hidden album respectively. I am using JQuery to switch the two classes whenever the albums get changed. But the removeClass function is not working and the existing classes are not removed. I am showing the relevent code snippets

 <!-- 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);
    })

Please anyone help me to figure out my error

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Ok, looks like I made a logical error as pointed out by Andreas in the comments. the correct code will be

$('.viewer.currAlbum').removeClass('currAlbum').addClass('temp');
$('.viewer.hiddenAlbum').removeClass('hiddenAlbum').addClass('currAlbum');
$('.viewer.temp').removeClass('temp').addClass('hiddenAlbum');
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.