有没有更好的方法来解决这个问题？

Question

我对Javascript中的对象相当新，但我已经可以告诉它将允许更有组织的代码结构。我现在遇到的问题是我真的不明白如何利用一个对象在页面上多次执行相同的基本功能。例如，以下脚本控制轮播。如果我只有一个这样的实例，它可以工作正常，但打破了多个轮播。对此有更好的方法吗？

对象脚本：

<script type="text/javascript">
var carousel = {
    config : {
        carouselDomContainer: $("#carousel-cont"),
        carouselImagesCont: $("#imgcont"),
        carouselDom: $("#carousel"),
        innerWrap: 'inner-wrap',
        outterWrap: "outter-img-container",
        slideDistance: 600,
        maxWidth: 650,
        maxHeight: 600,
        nextDom: "next",
        prevDom: "prev",

        $nextDom: function(){return $('#'+carousel.config.nextDom);},
        $prevDom: function(){return $('#'+carousel.config.prevDom);},
        $innerWrap: function(){return $('.'+carousel.config.innerWrap);},
        $outterWrap: function(){return $('.'+carousel.config.outterWrap);},

        wrapperHTML: function(){
            var options = carousel.config;
            return '<div id="'+options.prevDom+'" class="btn prev"><img src="http://www.the-leader.com/Global/images/ugc/leftarr_white.png" style="max-width:30%;margin-left:55%;"></div><div id="'+options.nextDom+'" class="btn next"><img src="http://www.the-leader.com/Global/images/ugc/rightarr_white.png" style="max-width:30%;margin-right:55%;"></div><div class="outter-wrap"><div class="'+options.innerWrap+'" style="height:100%;position:relative;"></div></div>';
        } 
    },

    init : function(config) {
        $.extend(carousel.config, config);
        carousel.buildWrapper();
        carousel.buildCarousel();
        carousel.buildUIActions();
        carousel.setStyles();
        carousel.insertBeforeFirst();
    },

    insertBeforeFirst: function(last,first){
        var indPane = carousel.config.$outterWrap();
        var indPaneFirst = indPane.first();
        var indPaneLast = indPane.last()
        $(indPaneLast).insertBefore(indPaneFirst);
    },

    setStyles: function(){
        var options = this.config;
        options.carouselDomContainer.css({
            width: options.maxWidth+'px',
            height: options.maxHeight+'px'
        });
        options.$innerWrap().css({left: '-'+options.slideDistance+'px', width: '3000px'});
    },

    buildUIActions: function(){
        var options = this.config;
        options.$nextDom().on("click",carousel.next);
        options.$prevDom().on("click",carousel.next);
    },

    buildWrapper: function(){
        var options = carousel.config;
        options.carouselDom.html(options.wrapperHTML());
    },

    buildCarousel: function(){
        var options = carousel.config;
        options.carouselImagesCont.find('li').each(function() {
            carousel.getContent($(this));
        });
        options.carouselImagesCont.remove();
    },

    getContent: function($li){
        var options = this.config;
        var htmlContent = '<div class="'+options.outterWrap+'" style="float:left;">';
                htmlContent += '<div class="inner-img-container" style="width:'+options.maxWidth+'px;height:'+options.maxHeight+'px;">';
                    htmlContent += '<img style="max-width:'+options.maxWidth+'px;max-height:'+options.maxHeight+'px;" src="'+$li.data('img')+'" />';
                    if($li.data('title')){htmlContent += '<div class="inner-text-container"><span style="font-weight:bold;font-size:14px;">'+$li.data('title')+'</span></div>';}
                    if($li.data('caption')){htmlContent += '<div class="inner-text-container"><span style="font-weight:bold;font-size:14px;">'+$li.data('caption')+'</span></div>';}
                htmlContent += '</div>';
            htmlContent += '</div>';
            carousel.drawContent(htmlContent);
    },

    drawContent: function($div){
        carousel.config.$innerWrap().append($div);
    },

    prev: function(){
        var options = carousel.config;
        var contDom = options.$innerWrap();
        var indPane = options.$outterWrap();
        var indPaneFirst = indPane.first();
        var indPaneLast = indPane.last()
        var Dist = options.slideDistance;
        contDom.animate({left:'+='+Dist}, "fast","swing", function(){
            indPaneLast.insertBefore(indPaneFirst);
            contDom.css({'left' : (Dist * (-1))});
        });
    },

    next: function(){
        var options = carousel.config;
        var contDom = options.$innerWrap();
        var indPane = options.$outterWrap();
        var indPaneFirst = indPane.first();
        var indPaneLast = indPane.last();
        var Dist = options.slideDistance;
        contDom.animate({left:'-='+Dist}, "fast", "swing", function(){
            indPaneFirst.insertAfter(indPaneLast);
            contDom.css({'left' : (Dist * (-1))});
        });
    }
}

</script>

HTML

<style type="text/css">
    .carousel{width:100%;height:100%;margin-top:20px;float:left;background-color:#000;position:relative;}
    .carousel .prev{left:-6%;}
    .carousel .next{right:-6%;}
    .carousel .btn{width:13%;height:13%;position:absolute;top:40%;text-align:center;cursor:pointer;z-index:2;}
    .carousel .outter-wrap{width:100%;height:100%;overflow:hidden;z-index:1}
    .carousel .inner-img-container{vertical-align:middle;display:table-cell;text-align:center;position:relative;}
    .carousel .inner-text-container{width:95.5%;position:absolute;bottom:0;left:0;background-color:rgba(0,0,0,0.7);color:#FFF;z-index:5;padding:10px;font-size:12px;text-align:left;}

</style>

<div id="carousel-cont">
    <div class="carousel" id="carousel"></div>
    <ul id="imgcont">
        <li data-title="Some title goes here1" data-caption="Some type of caption can go in this space" data-img="http://f52e304dfbaee0d644e5-e238cc27b87909affa90e9a9dd352aae.r50.cf1.rackcdn.com/152a8a72-aeed-42a7-99a3-ca4bd0680b55.jpg"></li>

        <li data-title="Some title goes here2" data-caption="Some type of caption can go in this space" data-img="http://familybugs.files.wordpress.com/2012/04/professional-group-of-five-for-web.jpg"></li>

        <li data-title="Some title goes here3" data-caption="Some type of caption can go in this space" data-img="http://groups.ku.edu/~deltasig/images/professional.jpg"></li>

        <li data-title="Some title goes here4" data-caption="Some type of caption can go in this space" data-img="http://images2.wikia.nocookie.net/__cb20121103230308/sega/images/6/67/Sonic_Art_Assets_DVD_-_Sonic_The_Hedgehog_-_18.png"></li>
    </ul>
</div>

INIT

carousel.init({
    carouselDomContainer: $("#carousel-cont"),
    carouselDom: $("#carousel"),
    carouselImagesCont: $("#imgcont"),
    innerWrap: 'inner-wrap',
    outterWrap: "outter-img-container",
    slideDistance: 630,
    maxWidth: 630,
    maxHeight: 400
});

我理解如何为旋转木马的单个实例做这个工作，但我似乎无法将我的大脑包围在这个旋转木马对象如何用于同一页面上的多个旋转木马？此外，任何人都可以向我解释如何轻松地向现有对象添加一个函数，使该函数可用于我在此页面上调用的任何实例吗？例如，如果在此轮播功能中，我想计算长度。但是，如果未在原始对象中声明计算函数，该怎么办？如何将其添加到此页面并将其用于此对象的所有实例？

任何帮助将不胜感激!!!提前谢谢。

克里斯

Answer 1

而不是id（＃）使用css类。

尝试

    <script type="text/javascript">
var carousel = {
    config : {
        carouselDomContainer: $(".carousel-cont"),
        carouselImagesCont: $(".imgcont"),
        carouselDom: $(".carousel"),
        innerWrap: 'inner-wrap',
        outterWrap: "outter-img-container",
        slideDistance: 600,
        maxWidth: 650,
        maxHeight: 600,
        nextDom: "next",
        prevDom: "prev",

        $nextDom: function(){return $('.'+carousel.config.nextDom);},
        $prevDom: function(){return $('.'+carousel.config.prevDom);},
        $innerWrap: function(){return $('.'+carousel.config.innerWrap);},
        $outterWrap: function(){return $('.'+carousel.config.outterWrap);},

        wrapperHTML: function(){
            var options = carousel.config;
            return '<div id="'+options.prevDom+'" class="btn prev"><img src="http://www.the-leader.com/Global/images/ugc/leftarr_white.png" style="max-width:30%;margin-left:55%;"></div><div id="'+options.nextDom+'" class="btn next"><img src="http://www.the-leader.com/Global/images/ugc/rightarr_white.png" style="max-width:30%;margin-right:55%;"></div><div class="outter-wrap"><div class="'+options.innerWrap+'" style="height:100%;position:relative;"></div></div>';
        } 
    },

    init : function(config) {
        $.extend(carousel.config, config);
        carousel.buildWrapper();
        carousel.buildCarousel();
        carousel.buildUIActions();
        carousel.setStyles();
        carousel.insertBeforeFirst();
    },

    insertBeforeFirst: function(last,first){
        var indPane = carousel.config.$outterWrap();
        var indPaneFirst = indPane.first();
        var indPaneLast = indPane.last()
        $(indPaneLast).insertBefore(indPaneFirst);
    },

    setStyles: function(){
        var options = this.config;
        options.carouselDomContainer.css({
            width: options.maxWidth+'px',
            height: options.maxHeight+'px'
        });
        options.$innerWrap().css({left: '-'+options.slideDistance+'px', width: '3000px'});
    },

    buildUIActions: function(){
        var options = this.config;
        options.$nextDom().on("click",carousel.next);
        options.$prevDom().on("click",carousel.next);
    },

    buildWrapper: function(){
        var options = carousel.config;
        options.carouselDom.html(options.wrapperHTML());
    },

    buildCarousel: function(){
        var options = carousel.config;
        options.carouselImagesCont.find('li').each(function() {
            carousel.getContent($(this));
        });
        options.carouselImagesCont.remove();
    },

    getContent: function($li){
        var options = this.config;
        var htmlContent = '<div class="'+options.outterWrap+'" style="float:left;">';
                htmlContent += '<div class="inner-img-container" style="width:'+options.maxWidth+'px;height:'+options.maxHeight+'px;">';
                    htmlContent += '<img style="max-width:'+options.maxWidth+'px;max-height:'+options.maxHeight+'px;" src="'+$li.data('img')+'" />';
                    if($li.data('title')){htmlContent += '<div class="inner-text-container"><span style="font-weight:bold;font-size:14px;">'+$li.data('title')+'</span></div>';}
                    if($li.data('caption')){htmlContent += '<div class="inner-text-container"><span style="font-weight:bold;font-size:14px;">'+$li.data('caption')+'</span></div>';}
                htmlContent += '</div>';
            htmlContent += '</div>';
            carousel.drawContent(htmlContent);
    },

    drawContent: function($div){
        carousel.config.$innerWrap().append($div);
    },

    prev: function(){
        var options = carousel.config;
        var contDom = options.$innerWrap();
        var indPane = options.$outterWrap();
        var indPaneFirst = indPane.first();
        var indPaneLast = indPane.last()
        var Dist = options.slideDistance;
        contDom.animate({left:'+='+Dist}, "fast","swing", function(){
            indPaneLast.insertBefore(indPaneFirst);
            contDom.css({'left' : (Dist * (-1))});
        });
    },

    next: function(){
        var options = carousel.config;
        var contDom = options.$innerWrap();
        var indPane = options.$outterWrap();
        var indPaneFirst = indPane.first();
        var indPaneLast = indPane.last();
        var Dist = options.slideDistance;
        contDom.animate({left:'-='+Dist}, "fast", "swing", function(){
            indPaneFirst.insertAfter(indPaneLast);
            contDom.css({'left' : (Dist * (-1))});
        });
    }
}

</script>