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

问题描述

问 题

我想写个轮播图插件,我页面上调用了两次..... 每一个传进去三张图片,但是我循环出来添加到页面上的时候 发现有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);

解决方案

你的两个元素，类名都是.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"
    }
});

这篇关于javascript - jQuery插件制作 一个页面多次调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！