@agulaliev

Реализация мини слайдера — почему в одном случае стрелка работает правильно, а в другом нет?

Всем привет
В общем, я делаю свой мини слайдер, и на этом моменте я просто застрял, не понимаю в чем ошибка

Дело в том, что при нажатии на кнопку назад, слайдер меняет активный элемент, вот его код
$(".meal-small-slider-arrow--prev").on('click', function(){
                $(".meal-small-slider__item").each(function(i,v){
                    if($(this).hasClass("meal-small-slider__item--is-active")){
                        if(i == 0){
                            return true;
                        }else{
                            let new_index = i - 1;
                            $(`.meal-small-slider__item`).removeClass("meal-small-slider__item--is-active")
                            $(`.meal-small-slider__item:eq(${new_index})`).addClass("meal-small-slider__item--is-active")
                        }
                    }
                })
            })


А когда я пишу тот же код, только чтобы кнопка "вперед" работала также, т.е. при нажатии вперед, отслеживается индекс элемента, увеличивается, и к нему присвается активный класс, то здесь инкремент не срабатывает никак.
Проводил тест в консоли, если инкремент стоит, то он выводит сразу все индексы начиная от текущего, а если убрать инкремент, оставить просто присваивание, то выводит один индекс.
$(".meal-small-slider-arrow--next").on('click', function(){
                $(".meal-small-slider__item").each(function(i,v){
                    if($(this).hasClass("meal-small-slider__item--is-active")){
                        if(i == 4){
                            return true;
                        }else{
                            console.log(i)
                            let new_index = ++i;
                            $(`.meal-small-slider__item`).removeClass("meal-small-slider__item--is-active")
                            $(`.meal-small-slider__item:eq(${new_index})`).addClass("meal-small-slider__item--is-active")
                        }
                    }
                })
            })


Пожалуйста, помогите, я уже замучался:)
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
@agulaliev Автор вопроса
Решением оказалось остановка выполнения условия через return false
$(".meal-small-slider-arrow--next").on('click', function(){
        $(".meal-small-slider__item").each(function(i,v){
            if($(this).hasClass("meal-small-slider__item--is-active")){
                if(i == 4){
                    return true;
                }else{
                    console.log(i)
                    let new_index = ++i;
                    $(`.meal-small-slider__item`).removeClass("meal-small-slider__item--is-active")
                    $(`.meal-small-slider__item:eq(${new_index})`).addClass("meal-small-slider__item--is-active")
                    return false;
                }
            }
        })
    })
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы