javascript - pengeluaran pemalam jQuery, berbilang panggilan pada satu halaman

Question

Saya ingin menulis pemalam imej karusel. Saya memanggilnya dua kali pada halaman saya... Setiap satu menghantar dalam tiga imej, tetapi apabila saya menggelungkannya dan menambahkannya pada halaman, saya mendapati terdapat 6 li itu. Saya mahu sekarang. Kesannya saya gelung sekali untuk menambah 3 li pada yang pertama, dan kali kedua untuk menambah li yang sepadan dengan yang kedua Saya harap pakar yang lulus boleh memberi saya nasihat....

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

(fungsi($, tetingkap, dokumen, tidak ditentukan) {

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, tetingkap, dokumen)

Answer 1

Dua elemen anda mempunyai kedua-dua nama kelas .xxx_carousel，所以当你给$(".xxx_carousel")Apabila mengikat, kedua-duanya akan diikat pada masa yang sama.

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