0

我在下面的代码中遗漏了什么吗？出于某种原因，脚本到达了“buildImgs”函数，然后当我尝试检索 dom HTML 时，它只会返回未定义的结果。有没有更聪明的方法来运行这样的东西？我对面向对象编程有点陌生，我不知道为什么我的 '$imgContainer' var 没有通过。请帮忙！！！

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

var carousel = (function(carousel){

    var config =  {
            mainContainer: $("#container1"),
            $imgContainer: $("#imgcont2"),
            slideDistance: Math.floor(Math.random()*100000001),
            maxWidth: 650,
            maxHeight: 600
    };

    var buildImgs = function(options){
        alert(options.$imgContainer().html());
    }

    var buildWrapper = function(options){
        var $div = options.containerID;
        var $dom = $("#"+$div);
        var html = '<div id="prev'+$div+'" 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="next'+$div+'" 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="inner-wrap'+$div+'" style="height:100%;position:relative;"></div></div>';
        $dom.html(html);
        buildImgs(options);
    }

    var drawContainer = function(options){
        options.mainContainer.html('<div id="'+options.containerID+'"></div>');
        buildWrapper(options);
    }

    carousel.init = function(config) {
        $.extend(config, config);
        config.containerID = Math.floor(Math.random()*100000001);
        drawContainer(config);
    };

    return carousel;    
}(carousel || {}));


</script>

<style type="text/css">
    .indbox{width:100px;height:100px;background-color:#000;}
    .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="container1"></div>
<div id="container2"></div>

    <ul id="imgcont1" style="display:none;">
        <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>

    <ul id="imgcont2" style="display:none;">
        <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 class="indbox"></div>

<script type="text/javascript">
var chris = carousel.init({
        mainContainer: $("#container1"),
        imgContainer: $("#imgcont1"),
        slideDistance: 200,
        maxWidth: 600,
        maxHeight: 400
    });

    var rond = carousel.init({
        mainContainer: $("#container2"),
        imgContainer: $("#imgcont2"),
        slideDistance: 100,
        maxWidth: 600,
        maxHeight: 400
    });
</script>
4

1 回答 1

2

$imgContainer 是变量而不是函数

改变 ：

var buildImgs = function(options){
    alert(options.$imgContainer().html());
}

到

var buildImgs = function(options){
    alert(options.$imgContainer.html());
}

此外，您正在尝试访问选项数组，但您的 init 函数使用配置数组。我的猜测是它应该是

var buildImgs = function(options){
    alert(config.$imgContainer.html());
}

更新以下评论：

最后，您将 $imgContainer 和 imgContainer 用于同一变量。你应该选择一个名字并坚持下去。

于 2013-10-30T22:30:36.863 回答