在頁面中多次使用時，JQuery插件無法正常工作

Question

我正在嘗試編寫一個名為grid2carousel的JQuery插件，該插件在桌面設備上的Bootstrap樣式網格中獲取一些內容，並在較小的屏幕上成為旋轉木馬。

如果插件是頁面上唯一的實例，但如果有多個插件則會遇到一些問題。 我在這里創建了一個Codepen來演示這個問題：

http://codepen.io/decodedcreative/pen/BzdBpb

嘗試注釋掉codepen的HTML部分中的一個組件，調整瀏覽器的大小，直到它成為輪播，然后再次重復此過程並取消注釋

每當瀏覽器寬度低於HTML中數據屬性中指定的斷點時，插件就會運行一個名為SetupPlugin的內部函數。 如果瀏覽器寬度超過此斷點，則稱為DestroyPlugin的函數會將HTML恢復為其原始狀態。 像這樣：

        checkDeviceState = function(){
            if($(window).width()>breakpointValue){
                destroyPlugin();
            }else{
                if(!$element.hasClass('loaded')){
                    setupPlugin();
                }
            }
        },

以下是我的插件代碼。 有人能給我一個關於我在這里做錯了什么的指針嗎？

(function (window, $){
$.grid2Carousel = function (node, options){
    var
    options = $.extend({slidesSelector: '.g2c-slides', buttonsSelector: '.g2c-controls .arrow'}, {},options),
    $element = $(node),
    elementHeight = 0,
    $slides = $element.find(options.slidesSelector).children(),
    $buttons = $element.find(options.buttonsSelector),
    noOfItems = $element.children().length + 1,
    breakpoint = $element.data("bp"),
    breakpointValue = 0;

    switch(breakpoint){
        case "sm":
            breakpointValue = 767;
            break;
        case "md":
            breakpointValue = 991;
            break;
        case "lg":
            breakpointValue = 1199;
            break;
    }

    setupPlugin = function(){

        // Add loaded CSS class to parent element which adds styles to turn grid layout into carousel layout
        $element.addClass("loaded");

        // Get the height of the tallest child element
        elementHeight = getTallestInCollection($slides)

        // As the carousel slides are stacked on top of each other with absolute positioning, the carousel doesn't have a height. Set its height using JS to the height of the tallest item;
        $element.height(elementHeight);

        // Add active class to the first slide
        $slides.first().addClass('active');


        $buttons.on("click", changeSlide);

    },

    destroyPlugin =  function(){
        $element.removeClass("loaded");
        $element.height("auto");
        $buttons.off("click");
        $slides.removeClass("active");
    },

    checkDeviceState = function(){
        if($(window).width()>breakpointValue){
            destroyPlugin();
        }else{
            if(!$element.hasClass('loaded')){
                setupPlugin();
            }
        }
    },

    changeSlide = function(){
        var $activeSlide = $slides.filter(".active"),
            $nextActive = null,
            prevSlideNo = $activeSlide.prev().index() + 1,
            nextSlideNo = $activeSlide.next().index() + 1;

        if($(this).hasClass('left')){


            if(prevSlideNo !== 0){
                $nextActive = $activeSlide.prev();
                $nextActive.addClass('active');
                $slides.filter(".active").not($nextActive).removeClass("active");
            }else{
                $nextActive = $slides.last();
                $nextActive.addClass('active');
                $slides.filter(".active").not($nextActive).removeClass("active");
            }

        }else if($(this).hasClass('right')){


            if(nextSlideNo !== 0){
                $nextActive = $activeSlide.next();
                $nextActive.addClass('active');
                $slides.filter(".active").not($nextActive).removeClass("active");
            }else{
                $nextActive = $slides.first();
                $nextActive.addClass('active');
                $slides.filter(".active").not($nextActive).removeClass("active");
            }

        }
    },

    getTallestInCollection = function(collection){

        $(collection).each(function(){
            if($(this).outerHeight() > elementHeight){
                elementHeight = $(this).outerHeight();
            }
        });

        return elementHeight;

    };

    setupPlugin();
    checkDeviceState();
    $(window).on("resize", checkDeviceState);

}




$.fn.grid2Carousel = function (options) {
    this.each( function (index, node) {
        $.grid2Carousel(node, options)
    });

    return this
}
})(window, jQuery);

非常感謝，

詹姆士

Answer 1

請查看插件代碼中的第30行，它看起來你只是忘記添加var關鍵字而不是創建局部變量來存儲函數setupPlugin，destoryPlugin等等你已經創建了全局變量然后每個新的初始化你的插件正在重寫此函數以指向新創建的滑塊。

setupPlugin = function(){

應該

var setupPlugin = function(){

這里更新了代碼。