ページ内で複数回使用するとJQueryプラグインが動作しない

Question

grid2carouselというJQueryプラグインを作成しようとしています。これはデスクトップデバイスのブートストラップスタイルのグリッドにいくつかのコンテンツを取り込み、小さな画面でカルーセルになります。

プラグインは、ページ上で唯一のインスタンスであれば正常に動作しますが、複数の問題がある場合は問題が発生します。私はこの問題を示すために、ここでCodepenを作成しました：

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

は、codepenのHTMLセクション内のコンポーネントの1をコメントアウトすることがカルーセルなっゴマブラウザのサイズを変更し、再度このプロセスを繰り返して試してみてくださいコメントなし

プラグインは、ブラウザの幅が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

それはあなたがちょうどそう代わりにローカル変数を作成するVARキーワードを追加することを忘れたことになります、あなたのプラグインのコードの行＃30をご確認くださいストア関数setupPlugin、destoryPluginなどでグローバル変数を作成した後、プラグインを新規に初期化するたびに、この関数が新しく作成されたスライダを指すように書き換えられます。

setupPlugin = function(){ 

は

var setupPlugin = function(){ 

更新されたコードhereでなければなりません。