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

【问题标题】：Slick slider - check fields before change slide光滑的滑块 - 在更改幻灯片之前检查字段
【发布时间】：2015-08-17 14:24:11
【问题描述】：

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

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

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

我正在使用这个：

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

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

【问题讨论】：

标签： javascript jquery validation slider slick.js

【解决方案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 和 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 
    }

【讨论】：