-1

我正在創建一個網頁，應該能夠將學生課程添加到列表/網格或任何類型的html元素。我還沒有決定哪種方法最好。爲對象創建一個html模板

我通過使用bootstrap3-typeahead.js找到了課程，當選擇其中一個我想將「課程項目」添加到某種籃子時 - 就像購物籃一樣。我聽說可以使用html模板，但我似乎無法通過搜索谷歌或在這裏找到任何好的示例。

現在我已加載的對象與屬性的列表（1360項）：

課程ID（從1-1360）
課程編號
課程名稱
課程教師
當然關鍵字

我希望這門課程我成爲課程的概覽。我想象這樣的事情：

現在我只是用下面將其添加爲<li>元素爲<ul>我做了。

$("#basket").append('<li>' + item.name + ', ' + item.number + '</li>');

導致此：

我想象中的能變量適用於某種模板，這將用於補充說，每一個項目，E.I.完成$("#basket").loadTemplate(<template name>, item.name, item.number etc..)

簡而言之：

我想知道是否有使用HTML模板創建，我可以用JavaScript/JQuery的，如果可能，如何做到這一點的控制元件的一些方法？

謝謝！

來源

2016-04-28 Zeliax

什麼問題？ –

那麼現在你問，回顧我的問題可能很難弄清楚。我想知道是否有某種方法使用html模板創建可以使用javascript/JQuery控制的元素，並且如果可能的話，這是如何完成的？ – Zeliax

你在說這個非常廣泛:)是的，你可以做一個「模板」功能，但你想要拖動框？這是一個非常不同的問題。也許將問題分解爲兩部分，並暫時放棄拖動功能 – NachoDawg

是的，你可以創建一個「模板」功能

//example 

var myBox = createBox("computer science", "0122", "programming, databases") 

$(".myCourseList").append(myBox) 

function createBox(courseName, courseId, courseClasses){ 
    var html = ""; 
    html += "<div class='courseBox'>" + 
     "<p class='courseName'>" + courseName + "</p>" + 
     "<p class='courseId'>" + courseId+ "</p>" + 
     "<p class='courseClasses'>" + courseClasses + "</p>" + 
     "<p class='xOut'>X</p>" + 
     "</div>" 
    return html; 
}

當然，你需要的東西拖動整個庫，而是把它看作一個不同的任務供以後使用。我忽略了CSS樣式，但是你會像通常那樣做CSS。只需編寫與代碼中相應的類即可。

現在，當您動態創建元素時，重要的是您的綁定。

$(".myCourseList").on("click", "p.xOut", function(){ 
    $(this).closest(".courseBox").remove(); //edited this line 
})

來源

2016-04-28 13:03:37 NachoDawg

由於某種原因，我無法上班 – Zeliax

啊，我發現了這個問題。在html項目的第一行中有一個缺少「+」.. – Zeliax

啊，我的壞！我會更新 – NachoDawg

爲對象創建一個html模板

簡而言之：

回答

相關問題