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中是唯一的。

使用类来初始化滑块。

`$('.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({并且它们都应该按预期工作。

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

2 个答案: