Отдельная область JQuery Plugin для каждого элемента

Question

Я разрабатываю плагин jouery для карусели. Я пытаюсь позвонить с более чем один карусельного сНу элемента как

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

Где я звоню Plugin

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

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

Plugin Код:

(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").

Проблема, с которой я столкнулся, заключается в том, что оба элемента карусели разделяют сферу переменных, селекторов и т. Д. Когда я выдвигаю одну карусель, другие карусели перемещаются, а также сталкиваются с некоторыми другими техническими проблемами. Как я могу выделить область кода 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. 
    }); 
    ... 
}); 

` ``