如何将插件应用于所有 div答案

【问题标题】：How to apply a plugin to all divs如何将插件应用于所有 div
【发布时间】：2015-11-09 15:36:42
【问题描述】：

我目前正在使用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',
                }
            );
        });

但这不起作用。那么我该怎么做呢？

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案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',
         }
     );
});

【讨论】：

不起作用，代码只是出错了，并且仅适用于一对（例如那些需要正确执行的人将无法正常工作）。同时，当我将鼠标悬停在一侧时，另一个 LI 会出现故障并仅在一个地方工作。
你能发个小提琴吗？

【解决方案2】：

使用.hover()函数怎么样？

$( "ul" ).hover(function() {
 // add functions here
});

【讨论】：

这不是一回事吗？我的问题是，当我尝试做我展示的事情时，代码完全出错了。
它是 mouseenter 和 mouseleave 的简写......但你只想在第一次调用它对吗？所以也许可以尝试一下，但要包含一个计数器或一个布尔值。就像是;变量计数器 = 0; $('ul').hover(function() {counter+=1; if (counter!=1){return false;}else{//do this}});