Question

https://jsfiddle.net/z3q2wtLf/29/embedded/result/

在上面附带的jsfiddle链接中.cd-hero有3张幻灯片，点击激活。我试图仅在第三张幻灯片（“谢谢”）上向jQuery添加一个停止事件，以便用户在该幻灯片上停止（不向右滑动或返回到之前的幻灯片）。我是jQuery的新手任何关于如何实现这一点的帮助非常感谢！

我尝试过应用以下内容但未成功：

$('.cd-btn').on('click', function(event) {
      event.preventDefault();
      if($(this).hasClass('.thanks')){
       event.stopPropagation();
      } else {
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

        updateNavigationMarker(selectedPosition + 1);
      }
  });

Answer 1

从按钮取消绑定点击事件。

$('.cd-btn').on('click', function(event) {
      event.preventDefault();
      if($(this).hasClass('.thanks')){
       $('body').unbind('click','.cd-btn'); // Unbind the click event
      } else {
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

        updateNavigationMarker(selectedPosition + 1);
      }
  });

Answer 2

从按钮取消绑定点击事件。

$('.cd-btn').on('click', function(event) {
      event.preventDefault();
      if($(this).hasClass('.thanks')){
       $('body').unbind('click','.cd-btn'); // Unbind the click event
      } else {
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

        updateNavigationMarker(selectedPosition + 1);
      }
  });

Answer 3

Dee我刚刚更新了你的jsFiddle，添加了一个简单的条件解决方案，如果项目的数量＆＃34; n＆＃34;等于不发射事件的长度。

function nextSlide(container, pagination, n) {

if(n != container.children('li').length){

var visibleSlide = container.find('.selected'),
  navigationDot = pagination.find('.selected');

visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
  visibleSlide.removeClass('is-moving');
});

container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
navigationDot.removeClass('selected')
pagination.find('li').eq(n).addClass('selected');

checkVideo(visibleSlide, container, n);

}else{ //Thank You events }

}

https://jsfiddle.net/z3q2wtLf/35/

在最后一张幻灯片上停止jQuery按钮事件

3 个答案: