mySwiper不是用jquery和cordova定义的

Question

我使用cordova和jquery，并尝试使用idangero的Swiper。

我试着这样做：

$(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    autoplay: ‘3000’,
    loop: true
    })
});

但当我把它称为时

$(document).on('pagebeforeshow', ‘#listDetail’, function(){
    … some codes …
    if(row.pictures != ''){
        var numslide = mySwiper.slides.length;
        mySwiper.appendSlide(slidecontent);
        for (var i = 0; i < numslide; i++) {
            mySwiper.removeSlide(0);
        }
        mySwiper.updateSlidesSize();
    }else{
        mySwiper.removeAllSlides();
    }
    … some codes …
});

我有一条未捕获引用错误：mySwiper未定义消息。

知道吗？

感谢

Answer 1

您需要在初始化mySwiper之前定义它，以便它可以在$(document).ready函数范围之外使用

var mySwiper;
$(document).ready(function () {
    //initialize swiper when document ready
    mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        autoplay: ‘3000’,
        loop: true
    })
});

或者，您可以在其他事件中获得Swiper实例，如下所示：

$(document).on('pagebeforeshow', ‘#listDetail’, function(){
    … some codes …
    if(row.pictures != ''){
        var mySwiper = $('.swiper-container')[0].swiper;
        var numslide = mySwiper.slides.length;
        mySwiper.appendSlide(slidecontent);
        for (var i = 0; i < numslide; i++) {
            mySwiper.removeSlide(0);
        }
        mySwiper.updateSlidesSize();
    }else{
        mySwiper.removeAllSlides();
    }
    … some codes …
});