当附加项目时，我如何使我的旋转木马上的单击功能工作

How do I make the click function on my carousel work when items are appended?

本文关键字：旋转木马 我的 单击 工作 功能 何使 项目      更新时间：2023-09-26

我在http://belmontfeed.com/site/上有一个(非常原始的)测试站点，我试图在右侧获得垂直旋转木马来控制左侧的照片。

上一个/下一个按钮工作得很好，通常单击一个轮播项目将加载与它相关联的照片，但每当我在轮播上allowWrap时，单击不再起作用。

我相信这是因为追加/前置搞乱了计数，点击功能是基于，但我是相当新的jQuery，我不知道在哪里转。

完整的代码应该可以在上面的网站上看到。任何帮助将非常感激!

if ( opts.allowWrap !== false ) {
  // prepend and append extra slides so we don't see any empty space when we
  // near the end of the carousel.  for fluid containers, add even more clones
  // so there is plenty to fill the screen
  // @todo: optimize this based on slide sizes
  opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).appendTo( wrap );
  if ( opts.carouselVisible === undefined )
     opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).appendTo( wrap );
  opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).prependTo( wrap );
  if ( opts.carouselVisible === undefined )
     opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).prependTo( wrap );
  wrap.find('.cycle-slide-active').removeClass('cycle-slide-active');
  opts.slides.eq(opts.startingSlide).addClass('cycle-slide-active');
}

UPDATE:最直接的点击函数代码如下:

$('#cycle-2 .cycle-slide').click(function(){ 
    var index = ($('#cycle-2').data('cycle.API').getSlideIndex(this)-8);   
    slideshows.cycle('goto', index); 
});

我添加了一个只减去8计数的贫民窟修复(因为这是前缀的数量)，但它一旦达到8就停止工作，直到它自动旋转回1。更可持续的解决方案将是可爱的…

使用jquery的新规范，您可以调用

$(document).on('click', '.cycle-carousel-wrap > div', function(e) {...});

这样，jquery每次都能找到对象，而不管它是否被修改/添加等。

希望这对你有帮助!

修复!我采取了权宜之计，把运算符从"-"换成了"%"，我就能得到我想要的结果了。要将其设置为动态数字，我只需将8替换为表示循环帖子数量的变量。

$('#cycle-2 .cycle-slide').click(function(){ 
    var index = ($('#cycle-2').data('cycle.API').getSlideIndex(this)%8);   
    slideshows.cycle('goto', index); 
});
相关文章：