javascript - How to give remove a class from a span and give it to another

Question

Im trying to create a slideshow of icons. The icons are in their own spans which have their own classes. Clicking on the arrow buttons should change add remove the 'active' class from the current span and add it to the next.

<div class="object-container">

    <div class="icon-container">
       <span class="active"><i class="fa fa-car"></i></span>
       <span class="not-active"><i class="fa fa-bicycle"></i></span>
       <span class="not-active"><i class="fa fa-plane"></i></span>
       <span class="not-active"><i class="fa fa-ship"></i></span>
       <span class="not-active"><i class="fa fa-fighter-jet"></i></span>
       <span class="not-active"><i class="fa fa-space-shuttle"></i></span>
    </div>
    <div class="arrow-buttons">
        <a href="" class="right-arrow" id="right-arrow"></a>
        <a href="" class="left-arrow" id="left-arrow"></a>
    </div>
</div>

Here is the CSS

.not-active{
font-size: 150px;
position: relative;
left: 12rem;
top: 12rem;
z-index: -10;
display: none;
}

.active{
z-index: 10;
display: inline-block;
font-size: 200px;
position: relative;
left: 9rem;
top: 10rem;

}

.object-container{
    position: relative;
    left: 40rem;
    top: 15rem;
    background-color: rgb(0, 0, 58);
    width: 40rem;
    height: 40rem;
}

.arrow-buttons{
position: fixed;
top: 30rem;
z-index: 100;
}

.left-arrow, .right-arrow{
width: 50px;
height: 50px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 rgba(255, 241, 241, 0.5);
cursor: pointer;

And finally the jQuery

$(document).ready(function(){
$(".right-arrow").on('click', function(){
    let currentImg = $('.active');
    let nextImg = currentImg.next();

    if(nextImg.length){
        currentImg.removeClass('active').css('z-index', -10);
        nextImg.addClass('active').css('z-index', 10);
    }

})

$(".left-arrow").on('click', function(){
    let currentImg = $('.active');
    let prevImg = currentImg.prev();

    if(prevImg.length){
        currentImg.removeClass('active').css('z-index', -10);
        prevImg.addClass('active').css('z-index', 10);
    }

})
})

For some reason the site application is irresponsive. I have tried the chrome browser tools which doesnt seem to show any errors. I've tried console logging and alerts and the buttons do appear to be working but for some reason the slideshow doesnt work.

Any help would be appreciated.

question from:https://stackoverflow.com/questions/65649049/how-to-give-remove-a-class-from-a-span-and-give-it-to-another

Answer 1

The code you have written is fine. It's not working because of the way you used the anchor tag As you are clicking on the left and right buttons page is getting reload and you are not able to see the required slide.

If you are not redirecting anywhere href shouldn't be empty it should be like below:

        <a href="#" class="right-arrow" id="right-arrow"></a>
        <a href="#" class="left-arrow" id="left-arrow"></a>

or else you can use event.preventDefault()

$(document).ready(function () {
  $('.right-arrow').on('click', function (event) {
    event.preventDefault();
    let currentImg = $('.active');
    let nextImg = currentImg.next();

    if (nextImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);
    }
  });

  $('.left-arrow').on('click', function (event) {
    event.preventDefault();
    let currentImg = $('.active');
    let prevImg = currentImg.prev();

    if (prevImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      prevImg.addClass('active').css('z-index', 10);
    }
  });
});

As it will prevent the default behaviour of the anchor element.