Как сделать чтобы кнопка становилась активной в зависимости от того можно пролистывать или нет?

Question

У меня есть табы. И их можно пролистывать двумя способами. При нажатии на заголовки вкладок, и при нажатии на стрелки.

Нужно при нажатии на стрелки менять их активность (для .btn__arrow__stroke добавлять класс active). Чтобы можно было листать до упора вправо и назад до упора влево, и кнопка соответственно чтобы становилось активной или неактивной в зависимости от того можно пролистывать или нет.

Скрипт переключения по кнопкам(слово "Пред." что то вроде триггера):

$('.tab_content .button .btn__arrow__stroke').click(function() {
    
    let tabsContent = $(this).closest('.tab_content.active');
    let tabsToggler = $(this).closest('.tab_container').prev().find('li.active');
    let dir = $(this).text().trim() == 'Пред.' ? 'prev' : 'next';

    if (dir == 'prev') {
        if (tabsToggler.prev().length) {
            tabsToggler.prev().addClass('active').siblings().removeClass('active');
            tabsContent.prev().show().addClass('active').siblings().hide().removeClass('active');
        }
    } else {
        if (tabsToggler.next().length) {
            tabsToggler.next().addClass('active').siblings().removeClass('active');
            tabsContent.next().show().addClass('active').siblings().hide().removeClass('active');
        }
    }
});

HTML структура всего таба:

<div class="services__content">
                
    <ul class="tabs" id="development">
        <li class="active"><a>Первый</a></li>
        <li><a>Второй</a></li>
        <li><a>Третий</a></li>
        <li><a>Четвертый</a></li>
    </ul>

    <div class="tab_container">

        <div class="tab_content active" id="development1">

            <div class="info__block">

                <p class="title">Заголов</p>
                <p class="text">Текст</p>

                <div class="button">

                    <div class="btn__arrow__stroke">
                        Пред.
                    </div>

                    <div class="btn__arrow__stroke">
                        Некст
                    </div>

                </div>

        </div>

        <div class="tab_content" id="development2">Второй</div>
        <div class="tab_content" id="development3">Третий</div>
        <div class="tab_content" id="development4">Четвертый</div>

    </div>

</div>

Answer 1

Возможно, я где-то ошибся, но логически должен быть понятен алгоритм.

let tabsCount = 4; //количество табов всего
let step = 1; //счётчик, который мы будем увеличивать при нажатии вправо, уменьшать - при нажатии влево
if (dir == 'prev') { //ох и странно здесь у вас, конечно)) но не об этом речь
  if (step > 1 && step <=tabsCount) {
    console.log('листать влево всё ещё можно');
    //активируем предыдущий таб
    //активируем стрелку вправо (можно активировать лишь раз, когда tabsCount станет равен < 4)
    step--;
  } else {
    console.log('всё! листать влево более нельзя');
    //делаем стрелку влево неактивной
  }
} else {
  if (step < tabsCount) {
    console.log('всё ещё можно листать вправо');
    //активируем следующий таб
    //активируем стрелку влево (можно активировать лишь раз, когда tabsCount станет равен > 1)
    step++;
  } else {
    console.log('увы, но листать вправо уже нельзя');
    //делаем стрелку вправо неактивной
  }
}

P.S. С вашего позволения дам вам совет: строка, где вы определяете переменную dir, не кажется надёжной, так как текст кнопки может поменяться. Лучше завязать определение такой переменной на классе. Например: if ($(this).hasClass('btn__arrow__stroke__prev')) {//нажата стрелка влево} else if ($(this).hasClass('btn__arrow__stroke__next')) {//нажата стрелка вправо}

БЛОГ НА HUSL

Как сделать чтобы кнопка становилась активной в зависимости от того можно пролистывать или нет?

Ответы (1 шт):