我正在创建一个包含一些节点的表。当我点击表格中的特定节点时,会打开一个模态窗口(在这个模态窗口中,我需要插入我存储在div中的数据)。
/*each node is a hyperlink and has the "#animatedModal" href, and also a different id*/
var b = document.querySelectorAll("a");
b[i].setAttribute("id", i);
b[i].setAttribute("href", "#animatedModal");
/*when a particular node is clicked, the getEndpoints function is called*/
$("a").click(function(test) {
getEndpoints(test.target.innerHTML);//innerHTML= node id number
});
getEndpoints函数从服务器收集节点信息并将数据插入div
function getEndpoints(nodeid) {
$.get( "http://.../node/" + nodeid, function( node ) {
window.data = node;
var key = ["epid", "clslist", "loc", "name", "type", "zplus"];
var endpoints = node.endpoints[0];
for(var k = 0; k < key.length; k++){
$("#" + key[k]).text(endpoints[key[k]]); //this selects each id from the div(the id is the same as the key) and adds the value from the server to each key)
}
})}
此div始终显示已单击的节点的信息。例如:如果我按第一个节点,div显示第一个节点的信息,依此类推。
<div id="endDiv">
<ol>
<li><label>epid: </label><span id="epid"></span> </li>
<li><label>clslist: </label><span id="clslist"></span> </li>
<li><label>loc: </label><span id="loc"></span> </li>
<li><label>name: </label><span id="name"></span> </li>
<li><label>type: </label><span id="type"></span> </li>
<li><label>zplus: </label><span id="zplus"></span> </li>
</ol>
</div>
使用此功能创建模态窗口:
function createModal() {
var content = $('<div/>', {
class: 'modal-content'
})
var createAnimation = $('<div/>', {
id: 'animatedModal'
});
var closeAnimation = $('<div/>', {
class: 'close-animatedModal'
});
$(".table-fill").append(createAnimation);
$("#animatedModal").append(content).append("CONTENT HERE");
$("#animatedModal").append(closeAnimation);
$(".close-animatedModal").append(closeAnimation).append("PRESS TO CLOSE");
所以,而不是&#34; CONTENT HERE&#34;,我希望我的模态窗口显示带有节点信息的div。
我试过了但没有任何结果:
$(".modal-content").append("#endDiv");
和
var divInfo = document.getElementById("endDiv").textContent;
$("a").on( "click", function() {
$(".modal-content").text(divInfo) );
});
有人可以帮我这个吗?