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

【问题标题】：How to use same jQuery script on same page如何在同一页面上使用相同的 jQuery 脚本
【发布时间】：2016-07-20 13:51:49
【问题描述】：

我用 carouFredSel 做了一个滑块底座。

当我在一页中使用 1 个滑块时，它可以完美运行。但是当我在同一页面上使用 2 个滑块时，它会变得一团糟（第一个滑块工作正常，但第二个滑块不工作。）

这是我的脚本：

<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>

jsfiddle中的工作代码如下所示。

JSFIDDLE

非常感谢您的帮助。

谢谢。

【问题讨论】：

当我复制所有 HTML、CSS 和 JS 代码并将所有“17”值重命名为“18”时，它运行正常。所以问题不在于同一页面上没有 2 个 carouFredSels。问题在于 id 和 classNames 如何锁定到第一个轮播。我还没有查看代码以查看问题出在哪里，但是在我能做到之前，您可以看到我的 jsfiddle 分支。它表明两个轮播都在同一页面上工作：jsfiddle.net/briankueck/9m0owzec
按照你的想法，这意味着创建 2 个滑块。在 WordPress 上实施无效（例如）。

标签： jquery wordpress code-reuse reusability

【解决方案1】：

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

$('[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({...});
}

现在取决于它是否从 17 开始，您将输入 var i = 17，然后将此 17 添加到计数器 ( sliders.length + 17 )（其中 sliders 是您可以获取和计数的页面上的滑块） .

希望这会有所帮助。

【讨论】：

谢谢@dingo_d 我正在使用你的第二个代码。它适用于布局，但分页和上一个下一个箭头无法正常工作。他们指向 SLIDER 2。请在这里查看JSFIDDLE
您不应该将 id 用于可以在您的网站上出现两次的内容。你有：prev: '#prevmod17', next: '#nextmod17',，它们是 id。除此之外，您应该检查滑块的 html 内容。尝试验证它并首先解决问题。
已经用class更改了id，但这里还是遇到同样的问题JSSFIDDLE。