остановить JQuery событие кнопки на последнем слайде

Question

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

В приложенном jsfiddle ссылке выше .cd-героя есть 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

Попробуйте это:

HTML

<a href="" class="cd-btn" id="BtnThankyou">Thank you</a> 

JS

$('.cd-btn').on('click', function(event) { 
      if($(this)[0].id == "BtnThankyou"){ 

      return false; 
      } 

      event.preventDefault(); 
      var activePosition = $('.cd-hero-slider .selected').index(); 
      var selectedPosition = activePosition + 1; 
      nextSlide($('.cd-hero-slider'), $(''), selectedPosition); 

      updateNavigationMarker(selectedPosition + 1); 
      }); 

DEMO

Answer 2

Добавить кнопку, которая удаляет другие кнопки, установив их свойство «дисплей» на «нет» или использовать $ (это) .hide()

Answer 3

Отвяжите событие клика от кнопки.

$('.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 4

Вы можете добавить еще один класс к последнему .cd-btn (кнопка спасибо, например, .btn-thank-you), а затем использовать $('.cd-btn:not(.btn-thank-you)'), чтобы исключить его из события щелчка.

Jsfiddle

Answer 5

Ди Я просто обновленное у наш jsFiddle, добавив простое решение условия, если количество элементов «n» равно длине, не запускайте события.

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/