jquery - 单击正文滚动到下一个 div

Question

我有很多 div，它们都带有“.slide”类，还有一个滚动功能，当单击一个 .slide div 时，它会滚动浏览它们。

看这里: http://codepen.io/thomasjwpayne/pen/KFotg

但是，我试图在单击正文而不是幻灯片时使该功能正常工作。此外，由于幻灯片显示为内联 block ，我需要在下一张幻灯片已完全显示在视口(viewport)中后滚动到幻灯片。

有人对此有任何指示吗？

Answer 1

你必须在某处保留一个跟踪器，在我的示例中 - 我使用 body 来保留一个 data-* 属性，该属性存储当前的 jQuery 对象当前在 View 中。

var currentSlide = $('body').data( 'current-slide', $('div.slide').eq(1) );

然后将 $.click() 处理程序从 $('div.slide') 切换到 $('body'):

$('body').click(function(e){
   e.preventDefault();
   //get the current slide index from the body tag.
   $this = currentSlide.data( 'current-slide' );
   $next = $this.next('div.slide');

   if($next.length) {
        $next.scrollTo($next.attr('id'));
        //Save the next slide as the current.
        $('body').data( 'current-slide', $next );
   } else {
        //Throw us back to the top.
        $('div.slide:first').scrollTo($('div.slide:first').attr('id'));
        //Save the first slide as the first slide, which 
        //Cycles us back to the top.
        $('body').data( 'current-slide', $('div.slide:first'));
   }

   $(".slide a").click(function(e) {
       e.stopPropagation();
   });
});

CodePen 演示: http://codepen.io/anon/pen/tBqhJ