javascript – 在页面中多次使用时,JQuery插件无法正常工作

如果插件是页面上唯一的实例,但如果有多个插件则会遇到一些问题.我在这里创建了一个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);

非常感谢,

詹姆士