如何在同一页面上两次使用相同的 jquery 脚本

Question

我是JQuery新手，遇到的问题如下：

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

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

相关代码如下：

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

我知道 ID 必须是唯一的，但是如何动态创建唯一 ID？

非常感谢您的帮助。

谢谢。

Answer 1

在选项取决于实例的多个元素上初始化插件的常用方法是使用 each 循环遍历它们，以便在循环内隔离实例。

在主滑块元素、按钮和寻呼机上使用通用类，例如 slider、prev 和 next 和 pager

$('.slider').each(function(){

   // instance specific elements needed for plugin
   var $slider = $(this), 
       $prev = $slider.find('.prev'),
       $pager=  $slider.find('.pager'),
       $next = $slider.find('.next');

   //initialize instance
   $slider.carouFredSel({
            responsive: true,
            pagination: $pager,
            prev: $prev,
            next: $next,
            auto: true,
            scroll: {
                duration: 1500,
                pauseOnHover: true
            },
            items: {
                height: 'variable',
                visible: {
                    min: 1,
                    max: 1
                }
            }
        });
});

Answer 2

ID 在 DOM 中必须是唯一的。

改用类来初始化滑块。

`$('.slider')`   // Make sure you add the className to the element to which you want
               // to attach the slider

如果用例仅用于将滑块附加到元素，为什么还需要动态 ID。

在上面的例子中你可能有一个元素

<div id="carmod17"

您将滑块连接到其上，它可以完美运行。

现在当第二个元素出现时，你可能又添加了一个元素

 // Slider 1
 <div id="carmod17"

 // Slider =2
 <div id="carmod17"

现在，当您尝试附加 $('#carmod17').carouFredSel({ 时，它只会分配给具有该 ID 的第一个元素。所以在元素中添加一个class 并使用该类来附加它。

// 滑块 1

 // Slider =2
 <div id="carmod17" class="slider"

现在你只需使用

$('.slider').carouFredSel({ 并且它们都应该按预期工作。