我正在实现slick slider,在每个幻灯片中都有不同的复选框和文本框。
当我按下按钮时,我需要检查滑动式滑片的每张幻灯片中的文本框内是否有内容,如果出现问题,必须禁用按钮。我在这里试图找出正确的使用方法。文档和演示中什么都没有,只有其他类似的问题,但是没有针对我的案例的良好示例和解决方案(this)。
那么,有没有一种方法可以只处理按钮事件而不触发下一张幻灯片?如果未实施,该如何实施?
我正在使用这个:
$('.container').on('beforeChange', function (slick, currentSlide) {
//check the fields, if the regex fails, disable the buttons.
}
但是按钮仅在下一张幻灯片中被禁用,因为与此同时,该幻灯片将切换到下一张幻灯片。
最佳答案
我通过更改库找到了解决方案:
在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
}
关于javascript - 滑滑条-更改滑条之前检查字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32052898/