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

Question

我有一个页面，我正在尝试使用构造函数来重构，而不是预加载几个隐藏的 div。我以前从未使用过构造函数，而我正在使用这个 Code Review post作为指导。唯一的区别是我的 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);
        }
      }
    })
  })

我尝试序列化/字符串化传递给函数的数据，但这没有帮助。我究竟做错了什么？我是否把这个问题过于复杂化了？

Answer 1

所以有一些内容是不正确的:

构造函数“有点”正确，唯一需要做的区别是将发送到“card.create(...)”的参数移动到“new Card(...)”

... = 参数。

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