2015-08-17 96 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 
    }