How to make class switching in reverse order?

Question

let button = document.querySelector('.btn'), blocks = Array.from(document.querySelectorAll('.block')), pointer = 0; button.addEventListener('click', function() { // Убираем прошлый блок blocks[pointer].classList.remove('active'); if (pointer + 1 >= blocks.length) pointer = 0; else pointer++; // Отмечаем новый блок blocks[pointer].classList.add('active'); });

 .main{ width: 100%; height: 800px; background-color: grey; overflow: hidden; } .block{ width: 500px; height: 500px; display: none; margin: 100px auto; } .red{ background-color: red; } .black{ background-color: black; } .green{ background-color: green; } .active{ display: block; }

 <button class="btn">button</button> <div class="main"> <div class="block red active"></div> <div class="block black"></div> <div class="block green"></div> </div>

https://jsfiddle.net/wb5yn1pu/

If you now have pointer = 0 and increase, then for the reverse order do you need pointer = length - 1 and decrease, or not?

Sasha Omelchenko Sasha Omelchenko 10.9k four 20 52 · Accepted Answer · 2017-02-27T16:10:01

 if(pointer == 0) pointer = blocks.length - 1; else pointer--;

How to make class switching in reverse order?

1 answer 1

More articles: