Question

我想知道是否可以使用jQuery创建类似于prev / next导航的内容，其中它使用相同的类索引所有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换成另一个红色或绿色，具体取决于它具有的实际索引。想法有人吗？看看我的小提琴：HERE!

Answer 1

看看下面的jQuery函数：

分组（）
下（）

示例：

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

您可以为当前元素添加“活动”类，并使用prev和next函数进行切换。

Jsfiddle

jQuery为prev / next导航索引div

1 个答案: