javascript - jQuery plug-in production, multiple calls on one page-PHP Chinese Network Q&A

I want to write a carousel image plug-in. I called it twice on my page... Each one passed in three images, but when I looped it out and added it to the page, I found that there were 6 li. Now I want to The desired effect is that I loop once and add 3 li to the first one. The second time I add the corresponding li to the second one. I hope a passing expert can give me some advice....

$(".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 += '' + i + '
' }) $carouselPicWarp.append($picTemplate) } } $.fn.xxx_carousel = function(opts) { var xxxCarousel = new xxx_carousel(this, opts); return xxxCarousel; }

})(jQuery, window, document)

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

reply all (1)

ringa_lee2017-06-26 10:52:37 1 floor

The class names of your two elements are both.xxx_carousel, so when you bind$(".xxx_carousel"), both will be bound at the same time. The correct approach is: only the first time Select the first binding, select the second binding a second time, and that's it.