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

另一种选择是将第一个元素设置为＆＃34; current＆＃34;使用它来开始幻灯片之间的导航。

*在prev控制点击上，如果在此之前没有元素，那么什么都不会发生，反之亦然，所以没关系，但如果你想让它在最后一个/第一个元素得到＆＃之后改变方向34;电流＆＃34;上课告诉我，我会更新代码...

这是：

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>

Jquery的：

$(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来帮助您理解它。）

Answer 2

如果当前幻灯片可见且其余部分被隐藏，您可以使用：

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

  var currentSlide = $(".slides > .slide:visible").next();

  // Do something with currentSlide.

});

选择下一个div jquery

2 个答案: