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. 
    }); 
    ... 
}); 

```