2015-08-17 100 views
1

我正在实施slick slider,每个幻灯片中都有不同的复选框和文本框。滑动滑块 - 更改幻灯片前检查字段

当我按下下一个按钮时,我需要检查放置在滑动滑块的每个滑块中的文本框内是否有内容,如果出现错误,则必须禁用按钮。我在这里试图找出正确的方法来使用。文档和演示中没有任何内容,只是像这样的其他问题,但没有我的案例的好例子和解决方案(this)。

那么,有没有一种只处理按钮事件而不触发下一张幻灯片的方法?如果没有实施,我该如何执行它?

我使用这个:

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

但是按钮仅下一张幻灯片禁用,因为目前的幻灯片切换到下一个。

回答

0

我找到了解决办法,通过改变库: 改变周围的行2160此行的Slick.prototype.slideHandler函数内部:

_.$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 
    }