Question

我正在制作简单的滑块，我在删除上一项的类时遇到问题。我需要从之前的“.modal-body img”中删除class active。我怎么能正确地做到这一点？现在它没有切换到下一个图像。关于代码改进的任何其他建议都表示赞赏。

HTML：

<div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" ><img src="images/portfolio/portfolio_1.png" alt="" ></a>

                    <div class="modal fade" aria-labelledby="myModalLabel">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/portfolio_1.png" alt="">
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

                <div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" data-target="#myModal"><img src="images/portfolio/office_2.jpg" alt="" ></a>

                    <div class="modal fade" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/office_2.jpg" alt="" >
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

                <div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" data-target="#myModal"><img src="images/portfolio/office_3.jpeg" alt="" ></a>

                    <div class="modal fade"arial-labelledby="myModalLabel">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/office_3.jpeg" alt="" >
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

Jquery的：

    var next = $(".next");
    var prev = $(".prev");
    var item = $('.modal-body > img');
    item.first().addClass("active");

    next.click(function(){
        var index = item.filter(".active").index();
        item.eq(index+1).addClass("active").item(index).removeClass("active");
    });

Answer 1

next.click(function(){
        var item = $('.modal-body > img');
        var index = +$('.modal-body > img').index($('.modal-body > img.active'));
        index = (item.length - 1 === index) ? 0 : index + 1;
        item.removeClass('active');
        item.eq(index).addClass("active");
    });

首先，我们通过查找活动元素来获取索引。然后，我们检查索引位于元素时的拐角条件。我们可以从所有项目中删除活动类，并仅添加所需项目。

如何使用特定类获取下一个元素

1 个答案: