Javascript 同一页面上的多个jQuery插件实例不工作

我在这个网站上搜索过，但没有得到我需要的。
我的问题是，我已经为转盘创建了一个jquery插件，它可以在1个实例上正常工作，但如果我创建了多个实例，它只能在最后一个实例上工作。

例如：
$（“#一”）.smartCarousel（）；//它不起作用了
$（“#两个”）.smartCarousel（）；//它起作用了

以下是插件代码：

;(function($){

// default options
var defaults = {
    slide : 1,
    autoPlay : false,
    autoPlayTime : 3000,
    speed : 400,
    next : false,
    prev : false,
    reverse : false,
    show : 4
}

// function
function sc(el, o){
    this.config = $.extend({}, defaults, o);
    this.el = el;
    this.init();
    return this;
}

// set init configurations
sc.prototype.init = function(){

    $this = this;
    // get children
    $this.children = $this.el.children();

    // wrape element, add basic css properties
    $this.el.wrap('<div class="smartCarouselWrapper clearfix"></div>')
        .css({
            position: 'absolute',
        }).parent().css({
            height: $this.el.outerHeight(true), // Height is setting on line 57
            width: '100%',
            overflow: 'hidden',
            position: 'relative'
        });

    // Show element by config
    // Calculate width by deviding wraper width
    // Set width of items
    $elw = $this.el.parent().width()/$this.config.show;
    $this.children.each(function(index, el) {
        $(this).width($elw);
    });

    w = $elw*$this.config.slide; // init width

    // get width, hadle diffrent width
    $this.children.each(function(index, el) {
        w += $(this).outerWidth(true);
    });

    // set lement width
    $this.el.width(w);

    // Set height for wrapper 
    $this.el.parent().height($this.el.outerHeight(true));

    // check if next handle assigned
    if ($this.config.next != false ) {
        $(this.config.next).click(function(e) {
            e.preventDefault()
            $this.next();
        });
    };

    // check if prev handle assigned
    if ($this.config.prev != false ) {
        $(this.config.prev).click(function(e) {
            e.preventDefault()
            $this.prev();
        });
    };

    $this.ready();
} // end of inti

sc.prototype.autoPlay = function(){
    // if reverse enabled
    if (this.config.reverse != false) { this.prev(); } else { this.next(); };
}

// do stuffs when ready
sc.prototype.ready = function(){
    if(this.config.autoPlay != false){
        this.timeOut = setTimeout('$this.autoPlay()', this.config.autoPlayTime);
    }
}

sc.prototype.next = function(){
    $this = this;

    clearTimeout($this.timeOut);


    l = 0; // left
    i = 0; // index

    // Add width to l from each element, limiting through slide
    $this.children.each(function(index, el) {
        if (i < $this.config.slide) {
            l -= $(this).outerWidth(true);
            //Clone first item after last for smooth animation
            $this.el.append($this.children.eq(i).clone());
            $this.children = $this.el.children();
        };
        i++;
    });

    // animat to show next items and appent prev items to end
    $this.el.stop().animate({
        left: l},
        $this.config.speed, function() {

            i = 0; // index
            $this.children.each(function(index, el) {
                if (i < $this.config.slide) {
                    $this.children.last().remove();
                    $this.children = $this.el.children();
                };
                i++;
            });

            i = 0;
            $this.children.each(function(index, el) {
                if (i < $this.config.slide) {
                    $(this).appendTo($this.el);
                    $this.el.css('left', parseInt($this.el.css('left'))+$(this).outerWidth(true));
                };
                i++;
            });
            $this.children = $this.el.children();
            $this.ready();
    });
} // end of next

sc.prototype.prev = function(){

    $this = this;

    clearTimeout($this.timeOut);

    l = 0; // left
    i = 0; // index

    //move last item to first through slide
    $this.children.each(function(index, el) {
        if (i < $this.config.slide) {

            //Clone first item after last for smooth animation
            $this.el.prepend($this.children.eq(($this.children.length-1)-i).clone());
            l -= $this.children.eq(($this.children.length-1)-i).outerWidth(true);
            $this.el.css('left', l);
            console.log(1);
        };
        i++;

    });
    console.log(l);
    $this.children = $this.el.children();
    // animate back to 0
    $this.el.stop().animate({left: 0}, $this.config.speed, function(){ 

        i = 0;
        $this.children.each(function(index, el) {
            if (i <= $this.config.slide) {
                $this.children.eq($this.children.length-i).remove();
            };
            i++;
        });

        $this.children = $this.el.children();
        $this.ready(); 
    });
} // end of prev

// plugin
if (typeof $.smartCarousel != 'function') {  
    $.fn.smartCarousel = function(o){
        if (this.length > 0) {
            new sc(this.first(), o);
        };
        return this;
    }
}else{
    console.log('Function already declared.');
    return this;
}

}(jQuery))

---

`

您的插件一次只能连接到一个jQuery元素。您可以这样改进：

// plugin
if (typeof $.smartCarousel != 'function') {
    $.fn.smartCarousel = function (o) {
        this.each(function(){
            // Connect to each jQuery element
            new sc($(this), o);
        });
        return this;
    }
} else {
    console.log('Function already declared.');
    return this;
}

至于其他问题，您有一个全局的

$this

共享。我在需要的地方添加了所有缺少的var$this，并在计时器中正确引用它（通过匿名函数包装器，以便我可以引用本地

$this

）：

JSFiddle：

；
（函数（$）{
//默认选项
var默认值={
幻灯片：1，
自动播放：对，
自动播放时间：1000，
速度:400,，
下一个：错，
上：错，
反面：错，
节目：4
}
//作用
功能sc（el，o）{
this.config=$.extend（{}，默认值，o）；
this.el=el；
this.init（）；
归还这个；
}
//设置初始化配置
sc.prototype.init=函数（）{
var$this=这个；
//生孩子
$this.children=$this.el.children（）；
//包装元素，添加基本css属性
$this.el.wrap（“”）
.css({
位置：'绝对'，
}).parent（）.css({
高度：$this.el.outerHeight（true），//第57行设置了高度
宽度：“100%”，
溢出：“隐藏”，
位置：'相对'
});
//按配置显示元素
//通过偏离包装宽度计算宽度
//设置项目的宽度
var$elw=$this.el.parent（）.width（）/$this.config.show；
$this.children.each（函数（索引，el）{
$（此）.width（$elw）；
});
var w=$elw*$this.config.slide；//初始宽度
//获取宽度，hadle different width
$this.children.each（函数（索引，el）{
w+=$（此）.outerWidth（真）；
});
//设置元素宽度
$this.el.宽度（w）；
//设置包装的高度
$this.el.parent（）.height（$this.el.outerHeight（true））；
//检查是否分配了下一个句柄
if（$this.config.next！=false）{
$（this.config.next）。单击（函数（e）{
e、 预防默认值（）
$this.next（）；
});
};
//检查是否分配了上一个句柄
如果（$this.config.prev！=false）{
$（this.config.prev）。单击（函数（e）{
e、 预防默认值（）
$this.prev（）；
});
};
$this.ready（）；
}//inti结束
sc.prototype.autoPlay=函数（）{
var$this=这个；
//如果启用了反转功能
如果（$this.config.reverse！=false）{
$this.prev（）；
}否则{
$this.next（）；
};
}
//准备好后再做
sc.prototype.ready=函数（）{
var$this=这个；
如果（$this.config.autoPlay！=false）{
$this.timeOut=setTimeout（函数（）{$this.autoPlay（）；}，$this.config.autoPlayTime）；
}
}
sc.prototype.next=函数（）{
var$this=这个；
clearTimeout（$this.timeOut）；
var l=0；//左
var i=0；//索引
//从每个元素向l添加宽度，通过幻灯片进行限制
$this.children.each（函数（索引，el）{
如果（i<$this.config.slide）{
l-=$（此）.outerWidth（真）；
//在最后一个项目之后克隆第一个项目以平滑动画
$this.el.append（$this.children.eq（i.clone（））；
$this.children=$this.el.children（）；
};
i++；
});
//设置动画以显示下一个项目，并显示上一个项目以结束
$this.el.stop（）.animate({
左：l
},
$this.config.speed，函数（）{
i=0；//索引
$this.children.each（函数（索引，el）{
如果（i<$this.config.slide）{
$this.children.last（）.remove（）；
$this.children=$this.el.children（）；
};
i++；
});
i=0；
$this.children.each（函数（索引，el）{
如果（i<$this.config.slide）{
$（this.appendTo（$this.el）；
$this.el.css（'left'，parseInt（$this.el.css（'left'））+$（this.outerWidth（true））；
};
i++；
});
$this.children=$this.el.children（）；
$this.ready（）；
});
}//下一节结束
sc.prototype.prev=函数（）{
var$this=这个；
clearTimeout（$this.timeOut）；
var l=0；//左
var i=0；//索引
//通过幻灯片将最后一项移到第一项
$this.children.each（函数（索引，el）{
如果（i<$this.config.slide）{
//在最后一个项目之后克隆第一个项目以平滑动画
$this.el.prepend（$this.children.eq（$this.children.length-1）-i.clone（））；
l-=$this.children.eq（$this.children.length-1）-i）.outerWidth（true）；
$this.el.css（'left'，l）；
控制台日志（1）；
};
i++；
});
控制台日志（l）；
$this.children=$this.el.children（）；
//将动画设置回0
$this.el.stop（）.animate({
左：0
// plugin
if (typeof $.smartCarousel != 'function') {
    $.fn.smartCarousel = function (o) {
        this.each(function(){
            // Connect to each jQuery element
            new sc($(this), o);
        });
        return this;
    }
} else {
    console.log('Function already declared.');
    return this;
}

;
(function ($) {

    // default options
    var defaults = {
        slide: 1,
        autoPlay: true,
        autoPlayTime: 1000,
        speed: 400,
        next: false,
        prev: false,
        reverse: false,
        show: 4
    }

    // function
        function sc(el, o) {
            this.config = $.extend({}, defaults, o);
            this.el = el;
            this.init();
            return this;
        }

        // set init configurations
        sc.prototype.init = function () {

            var $this = this;
            // get children
            $this.children = $this.el.children();

            // wrape element, add basic css properties
            $this.el.wrap('<div class="smartCarouselWrapper clearfix"></div>')
                .css({
                position: 'absolute',
            }).parent().css({
                height: $this.el.outerHeight(true), // Height is setting on line 57
                width: '100%',
                overflow: 'hidden',
                position: 'relative'
            });

            // Show element by config
            // Calculate width by deviding wraper width
            // Set width of items
            var $elw = $this.el.parent().width() / $this.config.show;
            $this.children.each(function (index, el) {
                $(this).width($elw);
            });

            var w = $elw * $this.config.slide; // init width

            // get width, hadle diffrent width
            $this.children.each(function (index, el) {
                w += $(this).outerWidth(true);
            });

            // set lement width
            $this.el.width(w);

            // Set height for wrapper 
            $this.el.parent().height($this.el.outerHeight(true));

            // check if next handle assigned
            if ($this.config.next != false) {
                $(this.config.next).click(function (e) {
                    e.preventDefault()
                    $this.next();
                });
            };

            // check if prev handle assigned
            if ($this.config.prev != false) {
                $(this.config.prev).click(function (e) {
                    e.preventDefault()
                    $this.prev();
                });
            };

            $this.ready();
        } // end of inti

        sc.prototype.autoPlay = function () {
            var $this = this;
            // if reverse enabled
            if ($this.config.reverse != false) {
                $this.prev();
            } else {
                $this.next();
            };
        }

        // do stuffs when ready
        sc.prototype.ready = function () {
            var $this = this;
            if ($this.config.autoPlay != false) {
                $this.timeOut = setTimeout(function(){$this.autoPlay();}, $this.config.autoPlayTime);
            }
        }

    sc.prototype.next = function () {
        var $this = this;

        clearTimeout($this.timeOut);


        var l = 0; // left
        var i = 0; // index

        // Add width to l from each element, limiting through slide
        $this.children.each(function (index, el) {
            if (i < $this.config.slide) {
                l -= $(this).outerWidth(true);
                //Clone first item after last for smooth animation
                $this.el.append($this.children.eq(i).clone());
                $this.children = $this.el.children();
            };
            i++;
        });

        // animat to show next items and appent prev items to end
        $this.el.stop().animate({
            left: l
        },
        $this.config.speed, function () {

            i = 0; // index
            $this.children.each(function (index, el) {
                if (i < $this.config.slide) {
                    $this.children.last().remove();
                    $this.children = $this.el.children();
                };
                i++;
            });

            i = 0;
            $this.children.each(function (index, el) {
                if (i < $this.config.slide) {
                    $(this).appendTo($this.el);
                    $this.el.css('left', parseInt($this.el.css('left')) + $(this).outerWidth(true));
                };
                i++;
            });
            $this.children = $this.el.children();
            $this.ready();
        });
    } // end of next

    sc.prototype.prev = function () {

        var $this = this;

        clearTimeout($this.timeOut);

        var l = 0; // left
        var i = 0; // index

        //move last item to first through slide
        $this.children.each(function (index, el) {
            if (i < $this.config.slide) {

                //Clone first item after last for smooth animation
                $this.el.prepend($this.children.eq(($this.children.length - 1) - i).clone());
                l -= $this.children.eq(($this.children.length - 1) - i).outerWidth(true);
                $this.el.css('left', l);
                console.log(1);
            };
            i++;

        });
        console.log(l);
        $this.children = $this.el.children();
        // animate back to 0
        $this.el.stop().animate({
            left: 0
        }, $this.config.speed, function () {

            i = 0;
            $this.children.each(function (index, el) {
                if (i <= $this.config.slide) {
                    $this.children.eq($this.children.length - i).remove();
                };
                i++;
            });

            $this.children = $this.el.children();
            $this.ready();
        });
    } // end of prev

    // plugin
    if (typeof $.smartCarousel != 'function') {
        $.fn.smartCarousel = function (o) {
            this.each(function () {
                new sc($(this), o);
            });
            return this;
        }
    } else {
        console.log('Function already declared.');
        return this;
    }

}(jQuery));

//$('.smart-carousel-list').smartCarousel();

$('#one').smartCarousel();
$('#two').smartCarousel();

var $this = this;