如何在同一页面上两次使用相同的 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

ID 在 DOM.

中必须是唯一的

改用 class 来初始化滑块。

`$('.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 并使用 class 附加相同的元素。

// 滑块 1

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

现在您只需使用

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

Answer 2

在选项取决于实例的多个元素上初始化插件的一种常见方法是使用 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
                }
            }
        });
});

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

How to use the same jquery script twice on a same page

wordpress

jquery

reusability