javascript - jQuery插件制作 一个页面多次调用

Question

我想写个轮播图插件,我页面上调用了两次..... 每一个传进去三张图片,但是我循环出来添加到页面上的时候 发现有6个li我现在想要的效果就是 我循环一次给我第一个添加3个li 第二次给第二个添加相对应的li 希望路过的大牛给指点下....

            $(".xxx_carousel").xxx_carousel({
                $picObj: {
                    "1": "showImgItem",
                    "2": "showImgItem cyan",
                    "3": "showImgItem red"
                }
            });

            $(".xxx_carousel").xxx_carousel({
                indicatorLeftText: '左',
                indicatorRightText: '右',
                $picObj: {
                    "4": "showImgItem",
                    "5": "showImgItem cyan",
                    "6": "showImgItem red"
                }
            });

(function($, window, document, undefined) {

var defaults = {
    navEvents: 'click',
    indicatorEvents: 'click',
    indicator: true,
    indicatorLeftText: 'left',
    indicatorRightText: 'right',
    animateSpeed: 800,
    $picObj: {},
    $cb: null
};

var xxx_carousel = function(ele, ops) {
    this.$ele = ele;
    this.settings = $.extend({}, defaults, ops);
    var _this = this;
    this.initaddElem();
}

xxx_carousel.prototype = {
    initaddElem: function(){
        var $picTemplate = '',
            $carouselPicWarp = $(".xxx_carousel_pic_warp"),
            _this = this;
            // --> 这个地方会循环两次 我页面调用的时候传了两个$picObj
            // --> 但是我发现循环时候它是直接在每个$(".xxx_carousel_pic_warp")下面添加了六个li 我现在想要的效果就是循环第一次 给我的第一个这个类名的加三个li,
            // --> 循环第二次的时候给我第二个类名的加三个li 而不是一次添加6个.... 这个该是怎么解决的呢？？
            $.each(this.settings.$picObj, function(i, val) {
                $picTemplate += '<li class="xxx_carousel_warp_item"><a class="' + val + '" href="javascript:;">' + i + '</a></li>'
            })
            $carouselPicWarp.append($picTemplate)
    }

}

$.fn.xxx_carousel = function(opts) {
    var xxxCarousel = new xxx_carousel(this, opts);
    return xxxCarousel;
}

})(jQuery, window, document)

Answer 1

你的两个元素，类名都是.xxx_carousel，所以当你给$(".xxx_carousel")绑定的时候，都会同时绑定两个，正确的做法是：第一次只选中第一个绑定，第二次选中第二个绑定，就可以了。

$(".xxx_carousel:eq(1)").xxx_carousel({ // 注意:eq(1)，也可以用jQuery的.eq(1)或者first()
    $picObj: {
        "1": "showImgItem",
        "2": "showImgItem cyan",
        "3": "showImgItem red"
    }
});

$(".xxx_carousel:eq(2)").xxx_carousel({ // 注意:eq(2)，也可以用jQuery的.eq(2)，由于总共只有两个，也可以用jQuery的.last()
    indicatorLeftText: '左',
    indicatorRightText: '右',
    $picObj: {
        "4": "showImgItem",
        "5": "showImgItem cyan",
        "6": "showImgItem red"
    }
});