我正在开发一个轮播 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.
});
...
});
```
关于javascript - JQuery 插件每个元素的单独作用域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39771382/