javascript - 当用户点击它时转到下一个 div 持有者？

Question

我有一个画廊，我想关闭活动持有人 div 并在用户点击它时转到下一个：

问题是，带有文本 1 的 div 持有人没有关闭并转到下一个持有人。我的 JS 有什么问题？

$(document).on("click", ".holder", function() {
  slideSwitch();
});

var ss=0;
function slideSwitch() {
  alert("click holder go to next next holder");

  var gallery = $('#slideshow'),
    active = gallery.find('.holder'),
    next;

  var number = $(".holder").length;

  if (active.next().length) {
    if (ss < number) {
      next = active.next();
ss++;
    }
  }

  active.hide();
  next.show();

}

.holder {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideshow>
  <div class='holder active'>
    text 1
  </div>

  <div class='holder'>
    text 2
  </div>

  <div class='holder'>
    text 3
  </div>

  <div class='holder'>
    text 4
  </div>
</div>

http://jsfiddle.net/oavnz8y2/1/

标签： javascriptjquery

Answer 1

试试这个：

$( document ).on( "click", ".holder", function() {
    slideSwitch();
});


function slideSwitch() {

    var active = $('#slideshow .holder.active');
    var index = $('#slideshow > div').index(active);

    if(index == 3)
        index = 0;
    else index++;

    active.removeClass('active');

    $('#slideshow').children().eq(index).addClass('active');
}