fai*_*cpt 1 html javascript dom
我有一个javascript函数,我打算用它来创建/添加一个'subLink'div的链接,并在这个链接上添加一个onclick事件,将相关的'content'加载到contentDiv:
function addSubLink(text, name, content) {
// append programLink span to subLinks:
document.getElementById("subLinks").innerHTML += "<span class=\"programLink\" id=\"" + name + "\">" + text + "</span>";
// load program content onclick:
document.getElementById(name).onclick = function () {
// set value of programContent to content's value
document.getElementById("programContent").innerHTML = content;
}
}
例如,loadAboutPage()将调用此函数以填充subLink div
var whatContent = "<p>A website!</p>";
var whyContent = "<p>Recreation!</p>";
var howContent = "<p>Kludges.</p>";
addSubLink("WHAT", "whatLink", whatContent);
addSubLink("WHY", "whyLink", whyContent);
addSubLink("HOW", "howLink", howContent);
问题是只有最后一个subLink附加了一个onclick事件(加载内容并更改css类).也就是说,它会创建WHAT,WHY和HOW链接,但只会将onclick函数附加到最后调用的函数:HOW,在这种情况下.
谈到JavaScript,我非常生疏,所以我不知道这是因为我对匿名函数缺乏了解,还是错误地使用本地'name'变量,或者其他完全不同的东西.我已经搜索了一段时间,但似乎我太无知甚至无法弄清楚类似的问题会是什么!
无论如何,我非常感谢你的帮助!提前致谢!
编辑:
这是一个完整的HTML示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Stack Overflow Example</title>
<script type="text/javascript">
function addSubLink(text, name, content) {
document.getElementById("subLinks").innerHTML += "<span class=\"programLink\" id=\"" + name + "\">" + text + "</span>";
document.getElementById(name).onclick = function () {
document.getElementById("program").innerHTML = content;
}
}
window.onload = function() {
var whatContent = "<p>A website!</p>";
var whyContent = "<p>Recreation!</p>";
var howContent = "<p>Kludges.</p>";
addSubLink("WHAT", "whatLink", whatContent);
addSubLink("WHY", "whyLink", whyContent);
addSubLink("HOW", "howLink", howContent);
}
</script>
</head>
<body>
<div id="container">
<div id="programWindow">
<div id="subLinks"> </div>
<div id="program"> </div>
</div>
</div>
</body>
</html>
问题是由于:
....innerHTML += "...";
通过设置innerHTML,首先删除所有现有的子元素,然后解析标记以创建新元素.因此,虽然最初的 "WHAT"和"WHY"跨度确实具有onclick绑定,但它们已经被类似的元素所取代.
要追加新的元素和保持状态,你需要使用DOM方法一样createElement(), appendChild()和createTextNode()(或设置textContent/ innerText):
function addSubLink(text, name, content) {
var span = document.createElement('span');
span.className = 'programLink';
span.id = name;
span.appendChild(document.createTextNode(text));
// append programLink span to subLinks:
document.getElementById('subLinks').appendChild(span);
// load program content onclick:
span.onclick = function () {
// set value of programContent to content's value
document.getElementById("programContent").innerHTML = content;
};
}