從另一個文件分配特定的文本彈出顯示HTML

Question

我有一個HTML實驗室測試列表。我想單擊實驗室測試來顯示更詳細地描述測試的彈出式窗口。

我目前使用的彈出驗證碼（和一些CSS未顯示）

<!-- Modal --> 
<div class="modal" id="modal-one" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-header"> 
     <h2>Test title goes here</h2> 
     <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"--> 
</div> 
<div class="modal-body"> 
    <p>Test description goes here. Would like to assign this to specific test description.</p> 
</div> 
<div class="modal-footer"> 
    <a href="#close" class="btn">Go away!</a> <!--CHANGED TO "#close"--> 
    </div> 
    </div> 
    </div> 
</div> 
<!-- /Modal --> 

我顯示彈出了：

<ul> 
    <li id="CBC"><a href="#modal-one">Complete blood count</a></li> 
    <li id="ferritin"><a href="#modal-one">Ferritin</a></li> 
</ul> 

正如經上所記，顯然默認文本被寫入對話框。

現在我可以爲每個測試製作特定的彈出窗口，但這顯然既不優雅也不緊湊的代碼。

1. 設置含有測試題（密鑰）和描述（值），什麼格式的文件：

   上怎麼會有我的任何建議。

2. 訪問那些鍵值對以顯示在彈出窗口中？

如果過於簡單的問題提前道歉，但我已經在這裏尋找天和其他地方。這樣的網站新手...

Answer 1

你可以使用JSON爲它，它基本上類似於文件中的JS對象。例如：

{ 
    title: "Title", 
    description: "desc" 
} 

要訪問此對象，您必須通過JavaScript爲您提供的許多ajax函數之一來加載它。我將舉例說明jQuery的$ .getJSON和標準的JavaScript XMLHttpRequest。

的jQuery：

$.getJSON("path/to/json", function(result) { 
    $(".modal-header h2").text(result.title); 
    $(".modal-body p").text(result.description); 
}); 

標準的JavaScript：

var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange=function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     var json = JSON.parse(xhttp.responseText); 
     document.querySelector(".modal-header h2").innerHTML = json.title; 
     document.querySelector(".modal-body p").innerHTML = json.description; 
    } 
}; 
xhttp.open("GET", "path/to/json", true); 
xhttp.send();