如何在同一页面上使用相同的jQuery脚本

我用carouFredSel做了一个滑块底座

当我在一个页面中使用一个滑块时，效果非常好。 但是，当我在同一页上使用两个滑块时，它会变得一团糟（第一个滑块正常工作，但第二个滑块不工作。）

下面是我的脚本：

<script>
    if ($('.carmod17').length) {
        $('.carmod17').carouFredSel({
            responsive: true,
            pagination: "#fooitemcatcar2",
            prev: '#prevmod17',
            next: '#nextmod17',
            auto: true,
            scroll: {
                duration: 1500,
                pauseOnHover: true
            },
            items: {
                height: 'variable',
                visible: {
                    min: 1,
                    max: 1
                }
            }
        });
    }
</script>

如果（$（'.carmod17'）。长度）{
$（'.carmod17'）。卡鲁弗雷泽尔({
回答：是的，
分页：#fooitemcatcar2“，
上一页：“#上一页17”，
下一个：“#nextmod17”，
是的，
滚动：{
持续时间：1500，
pauseOnHover:正确
},
项目：{
高度：“可变”，
可见：{
民:1,，
最高：1
}
}
});
}

JSFIDLE中的工作代码如下所示

非常感谢你的帮助

---

谢谢。

如果滑块的类相似，您可以执行以下操作：

$('[class*="carmod"]').each(function(){
    $(this).carouFredSel({...});
});

如果所有滑块都具有相同的类（

.carmod17

），则很容易：

$('.carmod17').each(function(){
    $(this).carouFredSel({...});
});

在第一种情况下，您的目标是名称中包含

carmod

的所有类。现在，您必须确保只有要初始化滑块的包装器上才有此类类。因为如果某个其他DOM元素的类中包含

carmod

，并且您不希望它是滑块，那么这将不起作用

如果您知道您的滑块将有类，如

.carmod17

、

.carmod18

、

.carmod19

等，那么您可以设置一个计数器来查看这些滑块的数量，并将其放入for循环中：

for( var i = 0; i < sliders.length; i++){
    $('.carmod'+i).carouFredSel({...});
}

for（变量i=0；i

现在取决于它是否从17开始，您将放入

var i=17

，并将这17添加到计数器

（sliders.length+17）

（其中

sliders

是您可以提取和计数的页面上的滑块）

---

希望这有点帮助。

当我复制所有HTML、CSS和JS代码并将所有“17”值重命名为“18”时，它运行正常。所以问题不是在同一页上有两个caroufredsel。问题在于如何将id和类名锁定到第一个旋转木马。我还没有查看代码以了解问题所在，但在我完成之前，您可以看到我的JSFIDLE分支。这表明两个转盘在同一个页面上工作：根据您的想法，这意味着创建2个滑块。在WordPress上实现无效（例如。）谢谢@dingo_d我正在使用你的第二个代码。布局工作正常，但分页和上一个下一个箭头无法正常工作。它们指向滑块2。请检查这里，你不应该使用id的东西，可以出现在你的网站上两次。您有：

prev:'#prevmod17'，下一个：'#nextmod17'，

，它们是id。除此之外，您还应该检查滑块的html内容。尝试验证它并首先修复错误。已使用类更改id，但仍然面临相同的问题。