0

Prev/next functionality not working on new section selection. The idea is that when the the page loads, several slide shows will load and the user will navigate through them with prev/next buttons. When they get to the end of one section, they will select the next section that they want to view. My problem is that the prev/next function doesn't work after the user navigates to a new section.

Here is a JSFiddle. So you don't miss them, the prev/next buttons are the edges of the prev/next slides hanging on the left and right side of the page, respectively. Below is the section of my javascript that I believe is causing the problem.

Thanks

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

1 回答 1

0

您没有将功能分配给其他部分的幻灯片。只有第一部分的幻灯片定义了 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 函数的右括号移动到第二个 click 函数下面时，但我不确定你的部分是如何工作的，所以它最终可能会多次分配 click 函数，除非你取消绑定它第一的。

// 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);
});
}
于 2013-02-08T20:05:24.117 回答