Индексация JQuery Div для предыдущей / следующей навигации

Question

Индексация JQuery Div для предыдущей / следующей навигации

0

Интересно, возможно ли создать что-то вроде предыдущей/следующей навигации с jQuery, где он индексирует все div с одним и тем же классом. Чтобы попробовать это, я создал довольно основную скрипку.

HTML:

<ul class="list-inline">
    <li><a href="#" class="prevtrigger">PREV</a></li>
    <li><a href="#" class="nexttrigger">NEXT</a></li>
</ul>

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="box">1</div>
                <div class="box">2</div>
                <div class="box">3</div>
            </div>  
            <div class="col-md-6">
                <div class="box">4</div>
                <div class="box">5</div>
                <div class="box">6</div>
            </div>
        </div>
    </div>

И я также создал основное действие jQuery, изменяющее цвет ящиков:

$( document ).ready(function() {

     $('.prevtrigger').click(function(){
                  $( '.box' ).css("background-color", "blue")
     });

    $('.nexttrigger').click(function(){
                  $( '.box' ).css("background-color", "green")
     });

});

Теперь возникает вопрос: как мне удалять цвет одного div после другого красного или зеленого в зависимости от фактического индекса, который он имеет. Идеи кто-нибудь? Посмотрите на мою скрипку: ЗДЕСЬ!

MarcL 19 март 2014, в 19:32

Источник

Теги:

javascript

jquery

indexing

Ещё вопросы

Mathias Dewelde · Accepted Answer · 2014-03-19T15-45-00.000Z

Взгляните на следующие функции jQuery:

предыдущая()
следующий()

Пример:

$(".box.active").prev().css("background-color", "blue" );
$(".box.active").next().css("background-color", "green");

Вы можете добавить "активный" класс к текущему элементу и использовать функцию prev и next для создания переключателя.

Jsfiddle

Спасибо! Похоже, я как-то застрял. Добавление «активного» класса, кажется, имеет смысл, но как бы вы поняли это? Похоже, я не понимаю сейчас: D
Да, думаю, мне просто нужен был перерыв, спасибо! Я пытаюсь реализовать это в «большем» проекте (портфолио, над которым я работаю), но я не могу воспроизвести это - вы видите мою ошибку? Скрипка: jsfiddle.net/mleyendecker/632Fw/105
Под ошибкой я подразумеваю, что он ищет не все элементы, а только элементы с одним и тем же классом в одном div списка .col-md-6 - есть ли шанс заставить его работать?

Индексация JQuery Div для предыдущей / следующей навигации

1 ответ

Ещё вопросы