javascript - 选择下一个 div jquery

Question

我正在尝试选择 .next() div 在轮播中工作。

但是，它似乎返回所有 .children() 而不是 .next()

HTML

<nav class="slider-navigation">
  <div class="left-arrow"></div>
  <div class="right-arrow"></div>
</nav>

<div class="slides">
  <div class="slide" id="slide1"></div>
  <div class="slide" id="slide2"></div>
  <div class="slide" id="slide3"></div>
  <div class="slide" id="slide4"></div>
</div>

JQUERY

$(".left-arrow").click(function () {

  var currentSlide = $(this).parent().siblings(".slides").children().next();

  // Do something with currentSlide.

});

当我在浏览器中 console.log(currentSlide) 时，它返回 .slides 的所有 4 个子级。

$(".right-arrow").click() 我只是不想添加重复代码

有什么帮助吗？

谢谢

Answer 1

另一种选择是将第一个元素设置为“当前”类，并使用它开始幻灯片之间的导航。

*on prev control click，如果在这个之前没有元素，那么什么也不会发生，反之亦然，所以没关系，但是如果你想让它在最后一个/第一个元素获得“当前”类之后改变方向，那么告诉我和我会更新代码...

这里是:

HTML:

<nav class="slider-navigation">
  <div class="left-arrow">left</div>
  <div class="right-arrow">right</div>
</nav>

<div class="slides">
  <div class="slide current" id="slide1"></div>
  <div class="slide" id="slide2"></div>
  <div class="slide" id="slide3"></div>
  <div class="slide" id="slide4"></div>
</div>

J查询:

$(document).ready(function(){
    $(".left-arrow").click(function(){
        $('.current').prev().addClass('current');
        $('.current:first').next().removeClass('current');
    });
    $(".right-arrow").click(function(){
        $('.current').next().addClass('current');
        $('.current:last').prev().removeClass('current');
    });
});

实例:http://jsfiddle.net/spvLpjct (我放了一些 CSS 来帮助您理解它)。