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的構造函數返回未定義的元素

回答

相關問題