Wtyczka JQuery nie działa, gdy jest używana wielokrotnie na stronie

Question

Próbuję napisać wtyczkę JQuery o nazwie grid2carousel, która pobiera pewną zawartość w siatce typu Bootstrap na komputerach i staje się karuzelą na mniejszych ekranach.

Wtyczka działa dobrze, jeśli jest to jedyna jej instancja na stronie, ale powoduje problemy, jeśli jest ich więcej. Stworzyłem Codepen tutaj wykazać problem:

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

Spróbuj zakomentowanie jednego ze składników w sekcji HTML w codepen, zmiana rozmiaru przeglądarkę aż staje się karuzela, a następnie powtarzając ten proces wraz z nim odkomentowana

Wtyczka działa, uruchamiając wewnętrzną funkcję o nazwie SetupPlugin za każdym razem, gdy szerokość przeglądarki jest poniżej punktu przerwania określonego w atrybucie danych w kodzie HTML. Jeśli szerokość przeglądarki przekracza ten punkt przerwania, funkcja o nazwie DestroyPlugin przywraca HTML do pierwotnego stanu. Podobnie jak:

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

Poniżej znajduje się mój kod wtyczki w całości. Czy ktoś mógłby mi wskazać, co robię źle?

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

Dziękujemy,

James

Answer 1

Proszę sprawdzić linia nr 30 w kodzie wtyczki, to wygląda, że ​​właśnie zapomnij dodać var słowa kluczowego więc zamiast tworzenia zmiennych lokalnych do przechowuj funkcje setupPlugin, destoryPlugin itd. utworzyłeś zmienne globalne, a następnie każde nowe zainicjowanie wtyczki przepisuje te funkcje tak, aby wskazywały na nowo utworzony suwak.

setupPlugin = function(){ 

powinny być

var setupPlugin = function(){ 

Zaktualizowany kod here.