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); 
     } 
     } 
    }) 
    }) 

Iは、シリアライズ/ stringi試み関数に渡されたデータを偽っているが、それは役に立たなかった。私は間違って何をしていますか？私はこれを過度に複製していますか？

Answer 1

ので、いくつかのものが間違っている：

コンストラクタは「ちょっと」正しい、あなたがしなければならない必要がある唯一の唯一の違いは、あなたが「card.create（...）」に送信された引数をすべき動いています「新しいカード（...）」に送信されます。

... =引数。

上記は1つの要素のためのものです。代わりに、ループを使用する代わりに、カードメソッドのコードをすべてcreateメソッドに移動する必要があります。これは良い方法ではありませんが、現在の問題を解決する方法です。