Question

我是否遗漏了以下代码？由于某种原因，脚本得到了 '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>

Answer 1

$ imgContainer是一个不是函数的变量

更改：

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

到

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

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

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

更新以下评论：

最后你使用$ imgContainer和imgContainer作为同一个变量。你应该选择一个名字并坚持下去。

为什么我不能在我的对象脚本中传递这个jquery选择器？

1 个答案: