Блог

Я разрабатываю плагин carousel 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 для каждого элемента, с помощью которого я вызываю этот плагин?

Область поиска элементов для текущего элемента, к которому применяется плагин.

Используйте 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. 
  });
  ...
});
  

«`