javascript - 光滑的 slider - 在更改幻灯片之前检查字段

Question

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

当我按下按钮时，我需要检查光滑 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的状态是什么。如果用户写错了，allow 变量将为 false，所以我必须禁用 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 
    }