Question

我收到此错误

未捕获的TypeError：无法读取未定义的属性追加。

我无法弄清楚我做错了什么因为我正在使用$（document）.ready（）。

但不知何故，在创建DOM之前，代码仍然被调用。

当我尝试将列表附加到DOM上的现有无序列表时，会发生错误。

以下是代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cat Clicker</title>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<body>
    <ul id='cat-list' style="display: inline;"></ul>
    <div id="cat">
        <h2 id="cat-name"></h2>
        <div id="cat-count"></div>
        <img id="cat-img" src="" alt="cat">
    </div>
    <div id="main">
    </div>

    <script src="js/libs/jquery.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

使用Javascript：

$(document).ready(function(){

/* ======= Model ======= */

    var model = {
        currentCat: null,
        cats: [
            {
                clickCount : 0,
                name : 'Tabby',
                imgSrc : 'img/434164568_fea0ad4013_z.jpg',
                imgAttribution : 'https://www.flickr.com/photos/bigtallguy/434164568'
            },
            {
                clickCount : 0,
                name : 'Tiger',
                imgSrc : 'img/4154543904_6e2428c421_z.jpg',
                imgAttribution : 'https://www.flickr.com/photos/xshamx/4154543904'
            },
            {
                clickCount : 0,
                name : 'Scaredy',
                imgSrc : 'img/22252709_010df3379e_z.jpg',
                imgAttribution : 'https://www.flickr.com/photos/kpjas/22252709'
            },
            {
                clickCount : 0,
                name : 'Shadow',
                imgSrc : 'img/1413379559_412a540d29_z.jpg',
                imgAttribution : 'https://www.flickr.com/photos/malfet/1413379559'
            },
            {
                clickCount : 0,
                name : 'Sleepy',
                imgSrc : 'img/9648464288_2516b35537_z.jpg',
                imgAttribution : 'https://www.flickr.com/photos/onesharp/9648464288'
            }
        ]
    };


    /* ======= Octopus ======= */

    var octopus = {

        init: function() {
            // set our current cat to the first one in the list
            model.currentCat = model.cats[0];

            // tell our views to initialize
            catListView.init();
            catView.init();
        },

        getCurrentCat: function() {
            return model.currentCat;
        },

        getCats: function() {
            return model.cats;
        },

        // set the currently-selected cat to the object passed in
        setCurrentCat: function(cat) {
            model.currentCat = cat;
        },

        // increments the counter for the currently-selected cat
        incrementCounter: function() {
            model.currentCat.clickCount++;
            catView.render();
        }
    };


    /* ======= View ======= */

    var catView = {

        init: function() {
            // store pointers to our DOM elements for easy access later
            this.catElem = $('#cat');
            this.catNameElem = $('#cat-name');
            this.catImageElem = $('#cat-img');
            this.countElem = $('#cat-count');

            // on click, increment the current cat's counter
            this.catImageElem.on('click', function(){
                octopus.incrementCounter();
            });

            // render this view (update the DOM elements with the right values)
            this.render();
        },

        render: function() {
            // update the DOM elements with values from the current cat
            var currentCat = octopus.getCurrentCat();
            this.countElem.text(currentCat.clickCount);
            this.catNameElem.text(currentCat.name);
            this.catImageElem.attr('src', currentCat.imgSrc);
        }
    };

    var catListView = {

        init: function() {
            // store the DOM element for easy access later
            this.catListElem = $('#cat-list');

            // render this view (update the DOM elements with the right values)
            this.render();
        },

        render: function() {
            // get the cats we'll be rendering from the octopus
            var cats = octopus.getCats();

            // empty the cat list
            this.catListElem.html('');
            $.each(cats, function(i, cat){
                var list = $('li');
                this.catListElem.append(list);
                list.text(cat.name);
                list.on('click', (function(catCopy){
                    octopus.setCurrentCat(catCopy);
                    catView.render();
                }(cat)));
            });    
        }
    };

    // make it go!
    octopus.init();
}());

未捕获的TypeError：无法读取属性＆＃39;追加＆＃39;未定义的

0 个答案: