上一个/下一个功能失败

Question

上一个/下一个功能不适用于新的部分选择。这个想法是，当页面加载时，将加载几个幻灯片，用户将使用 prev/next 按钮浏览它们。当他们到达一个部分的末尾时，他们将选择他们想要查看的下一个部分。我的问题是用户导航到新部分后，prev/next 功能不起作用。

这是JSFiddle。所以你不要错过它们，prev/next 按钮是分别挂在页面左侧和右侧的 prev/next 幻灯片的边缘。下面是我认为导致问题的 javascript 部分。

谢谢

var secName,
    slideCount,
    centSlide;

liveSec(0);

// Initiate live section
function liveSec(x) {
    centSlide = 0;
    secName = $('#slider > div:eq('+x+')').attr('id');
    slideCount = $('#'+secName+'').children().length;
    $('#'+secName+'').children().first().addClass('liveslide').next().addClass('next');
}

// call prev/next functions
$('#'+secName+' > div').click(function() {
    var index = $('#'+secName+' > div').index(this);
    if (index > centSlide) nextcycle(centSlide, slideCount);
    if (index < centSlide) prevcycle(centSlide, slideCount);
    return false;        
});

// cycle sections   
$('#'+secName+' .select').click(function () {
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    $('.liveslide').removeClass('liveslide');
    $('.prev').removeClass('prev');
    i = $('#'+secName+' .select').index(this);
    liveSec(i);
});

Answer 1

您没有将功能分配给其他部分的幻灯片。只有第一部分的幻灯片定义了 onclick 函数。确保从一开始就遍历所有这些

for (var i=0; i < noOfSections; i++)
{
    var secName = sections[i];

   // call prev/next functions
  $('#'+secName+' > div').click(function() {
      var index = $('#'+secName+' > div').index(this);
      if (index > centSlide) nextcycle(centSlide, slideCount);
      if (index < centSlide) prevcycle(centSlide, slideCount);
      return false;        
  });

  // cycle sections   
  $('#'+secName+' .select').click(function () {
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
      $('.liveslide').removeClass('liveslide');
      $('.prev').removeClass('prev');
      i = $('#'+secName+' .select').index(this);
      liveSec(i);
  });

}

实际上对我有用的是当您将 liveSec 函数的右括号移到第二次单击函数下方时，但我不确定您的部分是如何工作的，因此它最终可能会多次分配单击函数，除非你先解绑吧。

// Initiate live section
function liveSec(x) 
{
centSlide = 0;
secName = $('#slider > div:eq('+x+')').attr('id');
slideCount = $('#'+secName+'').children().length;         
    $('#'+secName+'').children().first().addClass('liveslide').next().addClass('next');


   // call prev/next functions
$('#'+secName+' > div').click(function() {
    var index = $('#'+secName+' > div').index(this);
    if (index > centSlide) nextcycle(centSlide, slideCount);
    if (index < centSlide) prevcycle(centSlide, slideCount);
    return false;        
    });

    // cycle sections   
$('#'+secName+' .select').click(function () 
    {
    if (!e) var e = window.event;
         e.cancelBubble = true;
         if (e.stopPropagation) e.stopPropagation();
    $('.liveslide').removeClass('liveslide');
    $('.prev').removeClass('prev');
    i = $('#'+secName+' .select').index(this);
    liveSec(i);
});
}