Toggle class between list elements on click of a button

Question

I need to remove and add a class between elements of a list, if I hit the #swapThumb button it should remove the selected class from the current element and then added to the next element.

Here's what I have

html

<ul id="product-thumbnails" class="thumbnails list-inline">
    <li class="vtmb vt-123 selected" style="">
        <a href="/uno"><img src="https://via.placeholder.com/100x100"></a>
    </li>
    <li class="vtmb vt-456" style="">
        <a href="/dos"><img src="https://via.placeholder.com/100x100"></a>
    </li>
    <li class="vtmb vt-789" style="display: none">
        <a href="/tres"><img src="https://via.placeholder.com/100x100"></a>
    </li>
    <li class="vtmb vt-101" style="">
        <a href="/cuatro"><img src="https://via.placeholder.com/100x100"></a>
    </li>
    <li class="vtmb vt-121" style="display: none">
        <a href="/cinco"><img src="https://via.placeholder.com/100x100"></a>
    </li>
</ul>

<button id="swapThumb">Next</button>

javascript

let thumbsNailsList = $('#product-thumbnails').find('li');
let swapButton = $('#swapThumb');

thumbsNailsList.each((index, item) => {

  let thumbsAvailable = $(item).attr('style');

  if (thumbsAvailable === '') {

    $(swapButton).on('click', () => {
      $(item).removeClass('selected');
      $(item).closest($(item)).next().addClass('selected');
    });
  }
});

First I'm checking if the li element has an empty style attribute (this is needed), if so, trigger the click validation.

The click should remove the selected class from the first element and then added to the next one and so on (it should match the empty style attribute). Once the selected class hits the last element of the list it should return the class to the first element.

Answer 1

This code snippet will change the class of the element beneath it to selected and remove it from the current one, while keeping all the other classes. It will also loop back to the beginning element if next is clicked when on the last element. I've heard jQuery functions are more expensive that document functions and shouldn't be used for these kinds of things. Apply this to your problem and you should get the expected result

 let i = 0; let thumbsNailsList = document.getElementById("product-thumbnails").children; let btn = document.getElementById("btn"); btn.onclick = function() { var prevClasses = thumbsNailsList[i].className; thumbsNailsList[i].className = prevClasses.replace("selected", ""); i = (i+1) % thumbsNailsList.length; thumbsNailsList[i].className = "selected"; console.log(thumbsNailsList); }

 <ul id="product-thumbnails"> <li class='selected'></li> <li class=''></li> <li class=''></li> <li class=''></li> </ul> <button id="btn">Next</button>