div的构造函数返回未定义的元素

我有一个页面我试图重构使用构造函数而不是预加载几个隐藏的div。我以前从未使用构造函数，因此我使用此Code Review post作为指导。唯一的区别是我的div是在页面加载时创建的。div的构造函数返回未定义的元素

数据存储为JSON，并通过匹配ID找到正确的对象索引。当来自匹配对象的数据传递给构造函数时，每个变量在控制台中都是未定义的，我无法弄清楚原因。

data.json

{ 
    "missions": [ 
    { "id":"miss1", 
     "content": { 
     "name": "Mission 1", 
     "desc": "This is a string description for a mission", 
     "longDesc": "This is the mission's lond description in case a short one is used someplace else.", 
     "img": "https://via.placeholder.com/250", 
     "vid": "https://via.placeholder.com/840x430" 
     } 
     }, 
    ... 
    ] 
}

的index.html

<!-- ... --> 
<div class='card--small' id='miss1'><h2>Mission 1</h2></div> 
<!-- repeat _n_ times... --> 

<div id="card-large></div>

的script.js

function Card(longDesc, img, video) { 
    this.desc = longDesc; 
    this.img = img; 
    this.video = video; 

    console.log(this.desc) // undefined 

    var container = document.getElementById("card-large"); 
    var card = document.createElement("div"); 
    card.className = "card"; 

    var img = document.createElement('div'); 
    img.className = "card__img"; 
    img.style.backgroundImage = "url(" + this.img + ")"; 
    card.appendChild(img); 

    var bio = document.createElement('div'); 
    bio.className = "card__bio"; 
    bio.innerHTML = this.desc 

    this.create = function() { 
     container.appendChild(card); 
    } 
    } 

    $(".card--small").click(function() { 

    var card = new Card(); 

    var id = $(this).attr('id'); 

    $.getJSON("data.json").done(function(data) { 
     for(var j=0; j<data.missions.length; j++) { 
     if(id == data.missions[j].id) { 
      card.create(data.missions[j].content.longDesc, data.missions[j].content.img, data.missions[j].content.vid); 
     } 
     } 
    }) 
    })

我试图序列化/ stringi寻找传递给函数的数据，但这没有帮助。我究竟做错了什么？我是否在过度复杂？

来源

2017-10-12 Brian

没有值传递给'Card（）' – guest271314

首先，如果您已经使用jQuery，则不需要处理appendChild。其次，'Car'构造函数需要三个参数，但是你可以不带参数地调用它。 – PeterMader

所以一些东西是不正确的：

构造函数是“有点儿”是正确的，也只是你应该做的是要发送的参数移动到“card.create（......）”差额被发送到“新卡（...）”

... =参数。

上面是一个元素寿，因为你想使用循环，而不是几乎所有的卡方法中的代码应该移动到创建方法。 Ofc这不是一个好办法，但它是解决您目前遇到的问题的方法。

来源

2017-10-12 17:39:33 Fyllekanin

啊......愚蠢的错误。我将'new card（...）'移入循环中，并放入JSON数据并工作。谢谢。 – Brian

div的构造函数返回未定义的元素

回答

相关问题