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

Question

WebN00b @WebN00b

JavaScript

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

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

(front, middle, back - название элементов)

next.click(function(){
        front.addClass('a_middle')
        front.removeClass('front')
        middle.addClass('a_back')
        middle.removeClass('middle')
        back.addClass('a_front')
        back.removeClass('back')
    });

макет учебный если что

Вопрос задан более трёх лет назад
194 просмотра

3 комментария

Подписаться 1 Средний 3 комментария

Михаил Костиков @kostikovmu

Нужен весь код или хотя бы чему ровны front, middle, back. Возможно выборка идет по классам которых нет после первого клика.

Написано более трёх лет назад
Вадим @MrDecoy Куратор тега JavaScript

Сложный и не расширяемый путь Вы какой-то выбрали. Сегодня у Вас три слайда. А завтра 5? Что будете в классах писать? prefront, front, middle, preend, end?
Почему бы не давать текущему слайду класс active, предыдущему prev, и соответственно, следующему - next, а при нажатии на кнопки вперёд\назад, подменять классы?
Таким образом получаем prev, active, next.

На деле у вас должны быть сохранены ссылки на элементы в переменных, таким образом:
nextBtn.onClick -> prevElem.removeClass('prev'), activeElem.addClass('prev'), activeElem.removeClass('active'), nextElem.addClass('active'), nextElem.removeClass('next'); Теперь самое сложное :) nextElem.next().addClass('next'). В момент назначения класса next нужно проверять, есть ли там ещё элементы. Если нет, то назначать next в круговую, то есть первому слайду. Если разумеется хотите чтобы он вкруговую работал. Ну и в обратную сторону при нажатии на prev кнопку.

Алгоритм придуман на ходу с учётом неполноты данных вопроса и не претендует на единственно верный :-)

P.s. .next() - метод из библиотеки jQuery, который обращается к следующему сёстренскому элементу. Аналог на нативном js - nextElementSibling.

P.p.s. хотя возможно Вы просто выбрали другие, не совсем стандартные, имена классов, а идея у Вас была та же, тогда первые строки этого комментария не актуальны :-)

Написано более трёх лет назад
WebN00b @WebN00b Автор вопроса

Вадим, большое спасибо за ответ

Написано более трёх лет назад