使用同一个插件的多个实例

Question

我刚刚在我的网站中实现了一个名为flip-carousel.js的插件。 以下是实现的示例。

示例实施

问题是我想拥有同一个插件的多个实例。 插件的初始化如下。

$('article').flipcarousel({
    pagination: false,
    loader: true,
    itemsperpage: 3,
    randomizer: 0.7
});

对于多个实例，我使用类而不是元素。 该插件获取元素列表，并使用注入的元素+我拥有的html标签中的内容将其更改为效果。 以下是多个实例的实现。

var roomTypes = hotelData.getSelectedRoomTypeIds();
roomTypes.forEach(function(e){
    if($('.flip_article_' + e.toString()).length > 0){
        $('.flip_article_' + e.toString()).flipcarousel({
            pagination: false,
            loader: true,
            itemsperpage: 3,
            randomizer: 0.7
        });
    }
})

我最初创建了一组具有给定类名称的元素（ '.flip_article_' + e.toString() ）。 例如，类名称可以是flip_article_1210 。

然后，我遍历元素并初始化插件。 问题是，尽管轮播是初始化的，但第一个轮播没有任何问题地被初始化，但是从第二组元素开始没有问题，但其中没有元素项。 我尝试阅读插件代码进行修改，但是不知道。

我首先想到的是，该插件使用了一个名为flip-carousel的父类，并将所有内容追加到该类中，如果我可以为我创建的每个转盘都拥有唯一的父类，那么其余的工作！ 但是它不起作用，因为其他方法都依赖于它。

我已经在以下网址中链接了插件的源代码。 如果有人可以帮助我，那将是很大的帮助。

插件源。

Answer 1

我已经编辑了一点插件，现在可以正常工作了。

在此文件的第73行上

更改$card = $('.card'); 到$card = $container.parent().find('.card');

检查这个小提琴

UPDATE

您应该像这样初始化插件

$('#flip1 article').flipcarousel({
    pagination: true,
    loader: true,
    itemsperpage: 3,
    randomizer: 0.7
});

$('#flip2 article').flipcarousel({
    pagination: true,
    loader: true,
    itemsperpage: 3,
    randomizer: 0.7
});