图库从文本2而不是文本1开始

Question

我有一个画廊，用户将点击按钮，画廊html将加载内部的div幻灯片和每次用户点击下一个div持有者将显示的文本。

问题是，图库总是从文本2开始，而不是从文本1开始。

我的jquery：

$(document).on( "click", ".click", function() {
  var a = "<div class='holder active'>text 1 -> click to text 2</div><div class='holder'>text2 -> click to text 3</div><div class='holder'>text3 -> click to end</div>";

  $('#slideshow').html(a);
  slideSwitch();
});

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

function slideSwitch() {
  var current = $('#slideshow .active');
  current.removeClass('active');
  if (current.next().length) {
      current.next().addClass('active');
  } else {
  alert("end");
    console.log('here');
      $('#slideshow').hide();
  }
}

我的画廊总是从第二个帖子开始。有什么办法解决这个问题吗？

http://jsfiddle.net/923ec6zL/

html

<span class=click>click to add html to slideshow div</span>


<div id=slideshow>


</div>

css

.holder{
  display:none;
}

.active{
  display:block;
}

Answer 1

这是因为开始时调用current.next()是活动的，而不是在第一次单击时将当前设置为活动。您应该使用某种类型的变量来检查当前是否没有任何活动，如果是，则将第一个变量设置为活动。(目前，第一个在默认情况下是活动的，但直到调用current.next()时才会添加它)