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（...）”应该发送到“新卡（...）”

... =参数。

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

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

1 个答案: