Plugin JQuery không hoạt động khi được sử dụng nhiều lần trong một trang

Question

Tôi đang cố gắng viết một plugin JQuery được gọi là grid2carousel, có một số nội dung trong lưới kiểu Bootstrap trên các thiết bị máy tính để bàn và trở thành băng chuyền trên màn hình nhỏ hơn.

Plugin hoạt động tốt nếu đó là phiên bản duy nhất của nó trên trang nhưng gặp phải một số sự cố nếu có nhiều vấn đề. Tôi đã tạo ra một Codepen đây để chứng minh vấn đề:

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

Hãy thử cho ý kiến ​​ra một trong những thành phần trong phần HTML của codepen, thay đổi kích thước trình duyệt đến khi nó trở thành một băng chuyền, và sau đó lặp lại quá trình này một lần nữa với nó uncommented

Plugin hoạt động bằng cách chạy hàm bên trong được gọi là SetupPlugin mỗi khi chiều rộng trình duyệt thấp hơn điểm ngắt được chỉ định trong thuộc tính dữ liệu trong HTML. Nếu chiều rộng của trình duyệt vượt quá điểm ngắt này, một hàm có tên DestroyPlugin sẽ trả về HTML về trạng thái ban đầu của nó. Giống như vậy:

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

Dưới đây là toàn bộ mã plugin của tôi. Ai đó có thể cho tôi một con trỏ như những gì tôi đang làm sai ở đây?

(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); 

Rất cám ơn,

James

Answer 1

Vui lòng kiểm tra dòng # 30 trong mã plugin của bạn, có vẻ mà bạn vừa quên thêm var từ khóa nên thay vì tạo ra các biến địa phương thiết lập các chức năng lưu trữPlugin, destoryPlugin và như vậy bạn đã tạo ra các biến toàn cầu và sau đó mỗi khởi tạo mới của plugin của bạn là viết lại các hàm này để trỏ đến một thanh trượt mới được tạo ra.

setupPlugin = function(){ 

nên

var setupPlugin = function(){ 

Cập nhật đang here.