我正在实现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/

10-09 15:18
查看更多