Question

我实施slick slider，每张幻灯片中都有不同的复选框和文本框。

当我按下接下来的按钮时，我需要检查放置在光滑滑块每张幻灯片中的文本框内的内容，如果出现问题，必须禁用按钮。我在这里试图找出正确的使用方法。文档和演示中没有任何内容，只有其他问题，但没有针对我的案例（this）的良好示例和解决方案。

那么，有没有一种方法可以处理按钮事件而不会触发下一张幻灯片？如果没有实现，我该如何实现呢？

我用这个：

$('.container').on('beforeChange', function (slick, currentSlide) {
//check the fields, if the regex fails, disable the buttons.
}

但按钮仅在下一张幻灯片中被禁用，因为同时幻灯片会更改为下一张幻灯片。

Answer 1

我通过更改库找到了解决方案：在Slick.prototype.slideHandler函数内的第2160行周围更改此行：

_.$slider.trigger(beforeChangeEvent, [_, _.currentSlide, animSlide]);

用这个：

var beforeChangeEvent = $.Event("beforeChange");  
_.$slider.trigger(beforeChangeEvent, [_, _.currentSlide, animSlide]);  
if(beforeChangeEvent.isDefaultPrevented()){  
    _.animating = false;  
    return;  
}

然后在你的代码中声明一个全局变量并使用它来检查当前幻灯片的每个字段，如果字段错误，则变量为false。在我的情况下，我只看一下用户关注时字段旁边显示的错误：

allow = true;  
 for(var i = 0; i < fields.length; i ++){
    if ($(field[i]).next('span').css("visibility") === "visible") {      
            allow = false;     
    }  
  }

此时我检查变量允许的状态。如果用户写错了，那么allow变量将为false，所以我必须禁用next next和prev：

   if(!allow){ //if the allow variable is false, one or more fields are wrong
      e.preventDefault();  //disable the buttons
    } else { //if allow is true (if there are no errors in the fields) 
      $form.slick('slickSetOption', 'swipe', allow, true); //enable the buttons 
    }

光滑滑块 - 在更改幻灯片之前检查字段

1 个答案: