Question

如果表格完全填写，我可以让我的旋转木马只向前移动。我尝试过使用滑动和滑动方法以及previus，next和pause。使用以下代码，我实现了我想要的功能和用户体验，但是我关注的是控制台错误

Uncaught RangeError: Maximum call stack size exceeded

这个错误现在似乎没有影响任何事情，但我确信它会在生产中或某个地方发生。

JS

// when my carousel is clicked to slide forward
$('#carousel-example-generic').on('slide.bs.carousel', function () {
  // find the active carousel item
$(".item").each(function(i11,e12){
  if ($(e12).hasClass("active")){
        // if the first input is blank 
        if ($(e12).find("input:first").val() === ""){
           // then pause the carousel and go back
       $('.carousel').carousel('pause');
       $('.carousel').carousel('prev');
        };      
      };
   });
});

HTML

<div id="carousel-example-generic" class="carousel slide carousel-off-screen form-group" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="item active">

这具有旋转木马移动到下一张幻灯片然后暂停和返回的正确效果，然后我可以告诉用户正确输入字段。但是，我很好奇如何修复错误。

http://jsfiddle.net/v87cL/3/

Answer 1

当您致电slide时，您再次触发prev事件，并且一次又一次无限期地。

取消暂停和返回，使用return false;取消活动或使用e.preventDefault();

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
    console.log(e); 
    $('.item.active',this).each(function(i,el) {
        if ($(el).find('input:first').val()==='') {
             e.preventDefault();   
        }
    });
});

http://jsfiddle.net/mblase75/v87cL/

Answer 2

另一个解决方案是使用滑动方法而不是滑动方法。这样它在幻灯片完成后执行，检查幻灯片的输入，如果没有完成则将其移回。

$('#carousel-example-generic').on('slid.bs.carousel', function (e) {
    $(".item").each(function(i11,e12){
        if ($(e12).hasClass("active")){
            if ($(e12).prev().find("input:first").val() === ""){
              $('.carousel').carousel('prev');
            };
        };
    });
});

Bootstrap Carousel和JQuery＆＃34; Uncaught RangeError：超出最大调用堆栈大小＆＃34;

2 个答案: