Question

    $(function(){
    var model = {
        init: function() {
            imageArray = [];
            imageArray[0] = {
            id: 0,
            image01 : new Image(),
            src : "c0.jpg",
            imageCaption : "cat0",
            count: 0
            };
            imageArray[1] = {
            id: 1,
            image01 : new Image(),
            src : "c1.jpg",
            imageCaption : "cat1",
            count: 0
            };
            imageArray[2] = {
            id: 2,
            image01 : new Image(),
            src : "c2.jpeg",
            imageCaption : "cat2",
            count: 0
            };
            imageArray[3] = {
            id: 3,
            image01 : new Image(),
            src : "c3.jpeg",
            imageCaption : "cat3",
            count: 0
            };
            imageArray[4] = {
            id: 4,
            image01 : new Image(),
            src : "c4.jpg",
            imageCaption : "cat4",
            count: 0
             };
        },
        returnImages: function() {
            return imageArray.map(function(e){
            return e;
            });
        }
    };


    var octopus = {
        openAll: function() {
            return model.returnImages();
        },
        init: function() {
            model.init();
            view1.init();
            view2.init();
        },
        open: function(id) {
            return imageArray[id];
        }


    };
    var view1 = {
        init: function() {
            this.catList = $('#elems');
            view1.render();
        },
        render: function(){
            var htmlStr = '';
            octopus.openAll().forEach(function(image){
                htmlStr += "<li><img id =\"clickme\" src='"+ image.src +"' alt='"+image.imageCaption+"' width=\"160\" height=\"120\"/></li></hr><br/>";
            });
            this.catList.html(htmlStr);
        }
    };
    var view2 = {
        init: function() {
            this.showCat = $('#show');
            this.clickme = $('#clickme');
            this.clickme.addEventListener('click', function(e) {
            view2.render(e.id);
        });

        },
        render: function(id){
            var htmlStr = '';
            octopus.open().forEach(function(image){
                htmlStr += "<li><img id="addcount" src='"+image.src+"' width=\"500\" height=\"500\"/></li></hr><br/>";
            });
            this.showCat.html(htmlStr);
        }
    };


    octopus.init();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cat Clicker</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="cc.js"></script>
</head>
<body>
<div class="container">
<div class="row-fluid">
    <div class="col-sm-3">
        <ul id="elems" class = "elems"></ul>
    </div>
    <div class="col-sm-9">
    <div id = "show"></div>
    </div>

</body>
</html>

以上是我的代码的快速结构。

我正在尝试构建一个图像库，其中将显示一个小图像图标列表，点击每个图标后，图像将以更大的尺寸在同一页面中打开。我能够显示图像列表，并且我的点击功能在某处出错了。

在我的javascript代码中，我有四个名为model，octopus，view1和view2的var。 view1显示图标列表，view2显示更大尺寸的图像。 model保存所有数据和基本操作，章鱼是视图和模型的控制器。

请帮我弄清楚这里有什么问题。

先谢谢

Answer 1

您使用ID＆＃34; clickme＆＃34;创建一些图像。这是第一个错误，因为不允许多个ID。您应该将其更改为类，并另外将picture.ID作为ID属性添加到该图像。

然后您的下一步是为图像附加事件处理程序。在该函数中，您尝试使用event.id，它与图像ID无关。事实上，view2的渲染函数根本不使用id，因为你忘了给它octopus.open（）作为参数。

Answer 2

更改此行

htmlStr += "<li><img id='addcount' src='"+image.src+"' width='500' height='500'/></li></hr><br/>";

单击事件Javascript - 未加载图像

2 个答案: