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
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');