文章/答案/技术大牛

发布

社区首页 >问答首页 >分配来自另一个文件的特定文本以弹出显示html。

问分配来自另一个文件的特定文本以弹出显示html。
EN

Stack Overflow用户

提问于 2016-08-03 21:53:45

回答 1查看 79关注 0票数 0

我有一个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>

在编写时，显然默认文本将写入对话框中。

现在，我可以为每个测试创建一个弹出窗口，但这显然既不优雅，也不紧凑。

如有任何建议，我会：

设置一个包含测试标题(键)和描述(值)以及什么格式的文件。
访问弹出中显示的那些键值对？

提前道歉如果问题太简单的话，但我已经找了好几天在这里和其他地方。这样一个新手到网站..。

javascript

html

css

popup

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-03 22:09:51

您可以使用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();

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38754270

复制

相似问题

问分配来自另一个文件的特定文本以弹出显示html。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分配来自另一个文件的特定文本以弹出显示html。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分配来自另一个文件的特定文本以弹出显示html。
EN