JQuery 插件對每個元素的單獨作用域

Question

我正在開發一個輪播 jquery 插件。 我正在嘗試使用多個輪播 div 元素進行調用，例如

<div class="carousel-container">...</div>
<div class="carousel-container2">...</div>
...

我在哪里調用插件

$(".carousel-container").mycarousel({
  // Properties
});

$(".carousel-container2").mycarousel({
  // Properties
});

插件代碼：

(function($) {
   $.fn.mycarousel = function(options) {
      var settings = $.extend({
        indicators : true,
        autoplay : true,
        autoplayDir : "forward",
        slidesToShow : 1,
        slidesToScroll : 1
    }, options);

    return this.each(function() {
      // JavaScript code like constructor function and its prototypes

      // variable declarations and initialization
      var outerCarouseWidth, imageWidth;
      var elements, carousel;
      ...

      // jquery code for selectors, events etc.
      var carouselInner = $(".carousel-inner");
      var carouselOuter = $(".carousel-outer");
      ...

      $(".next-link").on("click", function(e) {
            slide("next", "first");
      });
      ...
    });
   };
}(jQuery));

好吧，現在我正在嘗試在每個函數中使用 $(this) 訪問子元素。 像 $(this).children()[0].text("abc")。

我在這里面臨的問題是，兩個輪播 div 元素共享變量、選擇器等的范圍。當我滑動一個輪播時，其他輪播也會移動並面臨其他一些技術問題。 如何為我調用此插件的每個元素分隔 jquery 插件的代碼范圍？

Answer 1

將元素的發現范圍限定為應用插件的當前元素。

使用 carouselEl 作為所有子元素的父選擇器。

像這樣：

``

return this.each(function() {
  var carouselEl = $(this);
  ...

  // jquery code for selectors, events etc.
  var carouselInner = carouselEl.find(".carousel-inner");
  var carouselOuter = carouselEl.find(".carousel-outer");
  ...

  carouselEl.find(".next-link").on("click", function(e) {

        slide(carouselEl, "next", "first"); // This must also be scoped.. I cant see the code for this function. 
  });
  ...
});

``