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

wn9m85ua  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(126)

我有许多div,都带有类“.slide”,还有一个scroll to函数,当单击.slide div时,该函数可以滚动这些div。
标签:http://codepen.io/thomasjwpayne/pen/KFotg
然而,我试图让功能的工作时,点击身体,而不是幻灯片。此外,因为幻灯片显示为内联块,我需要它滚动到幻灯片后,当下一张幻灯片已经完全在视口中。
有人对此有任何方向吗?

lmvvr0a8

lmvvr0a81#

在我的例子中,你必须在某个地方保存一个跟踪器--我使用body来保存一个data-*属性,该属性存储当前视图中的当前jQuery对象。

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 Demo:http://codepen.io/anon/pen/tBqhJ

相关问题