javascript - 如何将插件应用于所有 div

Question

我目前正在使用 http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/作为插件，我想执行以下操作:

    $('#carousel-demo1').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );

            $('#carousel-demo2').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );

            $('#carousel-demo3').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );
            $('#carousel-demo4').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );

这是我用来启动插件的代码，它可以正常工作。但是，我希望当其中一个列表悬停时，所有列表都开始移动，而不仅仅是我悬停的列表。我尝试做的事情:

    $(document).ready(function()
    {       
        $('ul').mouseover(function() 
        {
            $('#carousel-demo1').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'left',
                }
            );

            $('#carousel-demo2').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'right',
                }
            );

            $('#carousel-demo3').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'left',
                }
            );
            $('#carousel-demo4').scrollingCarousel
            (
                {
                    autoScroll: true,
                    autoScrollDirection: 'right',
                }
            );
        });

        $('ul').mouseleave(function() 
        {
            $('#carousel-demo1').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );

            $('#carousel-demo2').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );

            $('#carousel-demo3').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'left',
                }
            );
            $('#carousel-demo4').scrollingCarousel
            (
                {
                    autoScroll: false,
                    autoScrollDirection: 'right',
                }
            );
        });

但这行不通。那么我该怎么做呢？

Answer 1

给你所有的li一个类，例如:

HTML:

<ul>
    <li class="demo"></li>
    <li class="demo"></li>
    <li class="demo"></li>
</ul>

JQUERY:

$('.demo').on('mouseover', function(){
    $('.demo').scrollingCarousel
     (
         {
             autoScroll: true,
             autoScrollDirection: 'left',
         }
     );
});