Как изменить содержание блока при нажатии на кнопку?

Question

[WebN00b]

Привет народ. У меня есть три класса - front, middle, end. Необходимо при нажатии на кнопку next изменить класс блоков - с front на middle, с middle на end, а с end на front и при нажатии на prev - наоборот.
.
Но так как я являюсь нубом в JavaScript, сделать у меня это не получается ( Точнее получается, но изменения происходят единожды).
.
Те, кто знают, как решить эту задачку (и упростить код, если возможно) помогите пожалуйста



Вот пен: https://codepen.io/mrfuzzybot/pen/aeRMwP

Comments

[Алексей Юдов]

Странный код, почему бы не использовать switch...case?

[irishmann]

Почему бы не взять готовый слайдер?

[Павел Диденко]

Почему бы не залезть в учебник по JavaScript и не написать самому, тем более, что макет учебный. Значит ты где то проходишь курсы? Какой в них смысл, если ты не хочешь даже почитать документацию

[WebN00b]

Павел Диденко, в инете нашёл макет, сам пытаюсь разобраться

[WebN00b]

TCloud, есть немало

[WebN00b]

irishmann, пробовал слик, но там нельзя изменить класс объекта, который ты свайпаешь, а мне нужно сделать именно это

Answer 1

[hzzzzl]

$('.next-btn').click(function(){

    let front       = $('.front')  // эти три элемента же каждый раз меняются
    let middle      = $('.middle')  // то есть их надо каждый раз
    let back        = $('.back')  // заново находить на странице

    front.addClass('middle')   // делаем его миддлом
    front.removeClass('front')  // убираем у него фронт, потому что он больше не фронт
    middle.addClass('back')
    middle.removeClass('middle')
    back.addClass('front')
    back.removeClass('back')
});
//prev по аналогии с next, только наоборот

Comments

[Beliyadm]

Не пойдет, ТС же говорит что изменяются единожды, то есть однократное нажатие на некст сработает, но повторное уже нет, изменяться будут другие кнопки.
Нужно каждый элемент с классами фронт\миддл\бек именовать по ID и изменение класса привязывать к ID соответственно, как то так
let front = $('#front')

[WebN00b]

Beliyadm, не переживай, друг - всё работает)