javascript - Production de plug-ins jQuery, plusieurs appels sur une seule page

Question

Je veux écrire un plug-in d'image de carrousel. Je l'ai appelé deux fois sur ma page... Chacune a transmis trois images, mais lorsque je l'ai bouclé et ajouté à la page, j'ai découvert qu'il y avait 6 li qui Je veux maintenant. L'effet est que je boucle une fois pour ajouter 3 li au premier, et la deuxième fois pour ajouter le li correspondant au second. J'espère qu'un expert de passage pourra me donner quelques conseils....

.

            $(".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"
                }
            });

(fonction ($, fenêtre, document, non défini) {

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, fenêtre, document)

Answer 1

Vos deux éléments ont les deux noms de classe. .xxx_carousel，所以当你给$(".xxx_carousel")Lors de la liaison, les deux seront liés en même temps. La bonne manière est de sélectionner uniquement la première liaison pour la première fois, et de sélectionner la deuxième liaison pour la deuxième fois.

$(".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"
    }
});