0

我不明白为什么会这样。我有一个刷卡器嵌套在另一个刷卡器中（一个用于垂直滚动，另一个用于水平滚动。让我发疯的是嵌套刷卡器在我需要销毁它时没有定义。这就是我正在做的事情：

function embedSwiper(){
var embeddedEcosystem = new Swiper('.swiper-nested', {
    //Styling set in bootstrap.min.css for pagination
    mode: 'vertical',
    pagination: '.pagination-nested',
    paginationClickable: true,

    simulateTouch : true,

});

embeddedEcosystem.swipeTo(0, 500, false);
return embeddedEcosystem;
}

这将创建 swiper，并将其返回给此函数：

function reInitEmbedded(){
    setTimeout(function(){
        embed = embedSwiper();
        $(".swiper-nested").css({"height" : "0px"});
        $(".swiper-nested").css({"height" : $(".internal-relations").height()});
        useLocalImg();
        embed.reInit();
        //Set the slide height properly since it never works as intended
        return embed;
    }, 600);
}

我需要在此处设置高度，否则幻灯片未正确安装（是的，我尝试过计算高度，但由于我使用的是工作灯，因此在移动设备上出现了问题）

现在，这就是事情变得古怪的地方。我正在 chrome 中对此进行测试（抱歉，目前我无法为您提供链接）。

//Resize cards
             swiper =  reinitSwiper();
             innerSwiper = reInitEmbedded();

             //Show info 
             detailsTransition();

             //Hides the overlay, and empties the panels to be filled next time
             //Bound calls for use when needed
             $(".back-button.btn.btn-primary.pull-left").on('click', function(){
                 goBack(lookUpName);
                 innerSwiper.destroy();
                 swiper.destroy();
             });

如您所见，我有swiper变量，它可以正常工作并且可以正常销毁，并且我有 innerSwiper。其余的无关紧要，因为它在此之前就已经工作了。让我发疯的是，它innerSwiper不断出现undefined，但这不应该是因为我已经在 chrome 的调试器中跟踪了堆栈调用，并且returns所有这些都具有内部 swiper 的 swiper 变量。所以我的问题是：我做错了什么，我一直不确定？

4

3 回答 3

2

这是因为范围问题。

在单击处理程序中，范围已更改，并且无法访问 innerSwiper。所以，改为这样做：

         this.swiper =  reinitSwiper();
         this.innerSwiper = reInitEmbedded();
         var self = this; // HOLD REFERNECE TO THIS AS SELF  


         //Show info 
         detailsTransition();

         //Hides the overlay, and empties the panels to be filled next time
         //Bound calls for use when needed
         $(".back-button.btn.btn-primary.pull-left").on('click', function(){
             goBack(lookUpName);
             self.innerSwiper.destroy(); // here you use self that has reference to swiper
             self.swiper.destroy();
         });

Thom x 指出的又一个错误。像这样修复它：

// Make sure self is defined be before this function

function reInitEmbedded(){
    setTimeout(function(){
        embed = embedSwiper();
        $(".swiper-nested").css({"height" : "0px"});
        $(".swiper-nested").css({"height" : $(".internal-relations").height()});
        useLocalImg();
        embed.reInit();
        //Set the slide height properly since it never works as intended
        self.innerSweeper =  embed; // change this
    }, 600);
}
于 2014-07-29T17:41:12.613 回答
1

reInitEmbedded 没有返回任何值。

function reInitEmbedded(){
    setTimeout(function(){
       return true;
    }, 600);
}

var a = reInitEmbedded();
console.log(a);

==> 未定义

于 2014-07-29T17:43:20.293 回答
0

Ok, so I figured out what I was doing wrong. Due to the fact that swiper and innersSwiper were global, and I didn't realize that setTimeout can't return anything, I had to access the global variables directly. And since i wasn't using the word innerSwiper in the reInitEmbedded, it wasn't referencing properly.

于 2014-07-29T19:32:16.680 回答