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/

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');
}

Answer 2

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

function slideSwitch() {
  var current = $('#slideshow .active');
  current.removeClass('active');
  if (current.next().length) {
      current.next().addClass('active');
  } else {
      $('#slideshow').hide();
  }
}

http://jsfiddle.net/oavnz8y2/8/

Answer 3

也许这可以更容易阅读和理解。您可以尝试以下一种方法：

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

function slideSwitch(e) {
  if(e.index() < $('.holder').length) {
    e.hide();
    e.next().show();
  };
}

http://jsfiddle.net/bg3qs9eo/1/

Answer 4

这行很奇怪

 active = gallery.find('.holder'),

它为您提供了几个要素，因此您无法.next() 您必须在活动的持有人上添加一个班级，然后再从活动的持有人中查找下一个持有人。

您必须从有效的持有人中删除有效的课程，然后将其添加到下一个。

这就是我要做的。当您单击一个持有人时，它将关闭该持有人并显示先前不再活跃的持有人：

$( document ).ready(function(){
  $('.holder:not(.active)').click(function(e){
    $('.holder.active').removeClass('active');
    $(this).addClass('active');
    });
});

.holder{ display:block; cursor: pointer;  border:1px solid black; margin:0.5rem auto;}
.holder.active{  display:none; }

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

用户单击时转到下一个div持有人？

4 个答案: