2

Обычный пример, но поставил в тупик, как при клике на "назад" - "вперед" переключать активный класс, буду рад если покажите реализацию на чистом JS, хотя на jQuery тоже не обижусь. Всем спасибо за ответы.

.Example span {
  color: blue;
}

.Example span.active {
  color: red;
}
<div class="Example">
  <span class="active">1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="nav">
  <span class="prev">назад</span>
  <span class="next">вперед</span>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • Нужна как бесконечная карусель, или когда первый span active, то на prev нельзя нажать? Commented 11 нояб. 2017 в 10:23
  • Бесконечная карусель Commented 11 нояб. 2017 в 17:18

3 ответа 3

4

@Алексей Шиманский написал алгоритм, пока я его кодил :D

$(".prev, .next").click(function(){   
    $a = $(".Example span.active");
    
    $x = $(this).hasClass('prev') ? $a.prev() : $a.next(); 
    
    if($x.length > 0){      
      $x.add($a).toggleClass('active');      
    }
    
});
.Example span {
  color: blue;
}

.Example span.active {
  color: red;
}
<div class="Example">
  <span class="active">1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="nav">
  <span class="prev">назад</span>
  <span class="next">вперед</span>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

8
  • Просто хотел дать удочку вместо рыбы) Commented 11 нояб. 2017 в 10:26
  • @АлексейШиманский это у меня удочка на jquery, у тебя лопата для червей скорее :D
    – teran
    Commented 11 нояб. 2017 в 10:34
  • Спасибо за ответ, объясните пожалуйста вот эти строки: $x = $(this).hasClass('prev') ? $a.prev() : $a.next(); - здесь вроде понятно, если при клике есть класс prev, то листаем назад, иначе вперед if($x.length > 0){ - вот эта проверка как считает ?? И как мне поправить, чтоб когда доходило до конца, при еще одном клике, опять заново начиналось ? Commented 11 нояб. 2017 в 11:40
  • @YourDeveloper какие вот эти?
    – teran
    Commented 11 нояб. 2017 в 11:41
  • @teran, будь другом, добавь ответ на чистом JS, делаю такое же не могу разобраться с индексами... Не писать же дубликат вопроса?
    – Air
    Commented 11 нояб. 2017 в 11:47
4

Рыбка на JS :)

function switchImage() {  
    let index = 0;
    
    let prevButton = document.getElementsByClassName('prev')[0];
    let nextButton = document.getElementsByClassName('next')[0];
    prevButton.addEventListener('click', function() { go(this); }, false);
    nextButton.addEventListener('click', function() { go(this); }, false);
    
    function go(el) {
        let images = document.querySelectorAll("#example span");         

        if (el.dataset.type == 'next') {
            index++;
            index = (index > images.length - 1) ? 0 : index;
        }

        if (el.dataset.type == 'prev') {
            index--;
            index = (index < 0) ? images.length - 1 : index;
        }

        for (let i = 0; i < images.length; i++) {
            images[i].classList.remove("active");

            if (i == index)
              images[i].className += " active";
        }        
    }    
}


switchImage();
#example span {
  color: blue;
}

#example span.active {
  color: red;
}
<div id="example">
  <span class="active">1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="nav">
  <span class="prev" data-type="prev">назад</span>
  <span class="next" data-type="next">вперед</span>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • Алексей, благодарю...
    – Air
    Commented 11 нояб. 2017 в 12:32
  • Алексей, еще одна просьба, посмотри мой последний вопрос, может ответишь? Не соображу с решением
    – Air
    Commented 11 нояб. 2017 в 12:59
3
  1. При клике на "назад"/"вперед" берется индекс элемента (index) с классом active
  2. Убираем у всех элементов класс active, чтоб не продублировался случайно
    • Если нажат "вперед" и индекс равен количеству элементов, то значит активным делаем активным первый
    • Если нажат "назад" и индекс равен первому, то значит активным делаем активным последний
    • Во всех иных случаях делаем активным элемент index + 1 или index - 1 в зависимости от нажатой кнопки next или prev соответственно
10
  • Алгоритм в принципе понятен, но как давать класс первому или последнему элементу ? Через nth-child как-то не так мне кажется это :) "во всех иных случаях index + 1" я это всё в переменную закину, но опять же, как написать, чтоб если там стояла цифра 2 - то он нашел второй элемент и дал ему активный класс ? Commented 11 нояб. 2017 в 19:14
  • 1
    Через nth-child - есть eq например.......чтоб если там стояла цифра 2 - где там? ...................он нашел второй элемент и дал ему активный класс - есть всё тот же eq Commented 11 нояб. 2017 в 19:18
  • 1
    @YourDeveloper так может вопрос на ruSO по gulp задать? ;-) может он ругается на let от ES6 Commented 11 нояб. 2017 в 19:38
  • 1
    @YourDeveloper с jquery цикл не нужен. Ибо у него есть removeClass (можно применить сразу ко всей коллекции) и addClass (можно применить к индексу с помощью eq) Commented 11 нояб. 2017 в 19:57
  • 1
    @YourDeveloper всё просто. В моем примере использовалась внутренняя функция, так сказать замыкание, в котором index был объявлен во внешней области, до функции переключения go. А у тебя каждый раз при клике индекс равен 0......... jsfiddle.net/awnn4rx1/1 ........... убираем циклы еще: jsfiddle.net/o6cugt45/2 Commented 11 нояб. 2017 в 20:50

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.