我还在为javscript / dhtml类工作。赋值是动态创建选择列表和填充列表，其中包含字符名称作为选项。我已经完成了。赋值的第二部分是创建一个函数来显示所选的角色名称（H3元素）以及角色所说的游戏线（Blockquote元素）。
我现在遇到的问题是，当我做出选择时，返回的值是“未定义的”。我觉得我已接近完成这个项目，只需要一些额外的帮助！我很乐意帮忙！
以下是HTML文件的一个小剪辑：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML, XHTML and DHTML 4th Edition
Tutorial 16
Case Problem 4
The Tempest
Author: Collin Klopstein
Date: December 15, 2013
Filename: tempest.htm
Supporting files: bio_out.jpg, globe_out.jpg, plays.css, plays_out.jpg,
scene.js, son_out.jpg, strat_out.jpg
-->
<title>The Tempest, Act V, Scene 1</title>
<link href="plays.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scene.js"></script>
</head>
<body>
<div id="linklist">
<img src="plays_out.jpg" alt="The Plays" />
<img src="son_out.jpg" alt="The Sonnets" />
<img src="bio_out.jpg" alt="Biography" />
<img src="globe_out.jpg" alt="The Globe" />
<img src="strat_out.jpg" alt="Stratford" />
</div>
<div id="title"><img src="tempest.jpg" alt="The Tempest" /></div>
<div id="actList"><table><tr>
<td>ACT I</td><td>ACT II</td><td>ACT III</td>
<td>ACT IV</td><td>ACT V</td>
</tr></table></div>
<div id="characterList"></div>
<div id="sceneIntro">
<h2>Lines from Act V, Scene 1</h2>
</div>
<div id="scene">
<h3>PROSPERO</h3>
<blockquote><i>Enter PROSPERO in his magic robes, and ARIEL</i></blockquote>
<blockquote>Now does my project gather to a head:<br />
My charms crack not; my spirits obey; and time<br />
Goes upright with his carriage. How's the day?
</blockquote>
<h3>ARIEL</h3>
<blockquote>On the sixth hour; at which time, my lord,<br />
You said our work should cease.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>I did say so,<br />
When first I raised the tempest. Say, my spirit,<br/>
How fares the king and's followers?
</blockquote>
<h3>ARIEL</h3>
<blockquote>Confined together<br />
In the same fashion as you gave in charge,<br />
Just as you left them; all prisoners, sir,<br />
In the line-grove which weather-fends your cell;<br />
They cannot budge till your release. The king,<br />
His brother and yours, abide all three distracted<br />
And the remainder mourning over them,<br />
Brimful of sorrow and dismay; but chiefly<br />
Him that you term'd, sir, 'The good old lord Gonzalo;<br />
His tears run down his beard, like winter's drops<br />
From eaves of reeds. Your charm so strongly works 'em<br />
That if you now beheld them, your affections<br />
Would become tender.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Dost thou think so, spirit?
</blockquote>
<h3>ARIEL</h3>
<blockquote>Mine would, sir, were I human.
</blockquote>
和JavaScript文件：
/*
New Perspectives on HTML, XHTML, and DHTML 4th Edition
Tutorial 16
Case Problem 4
Author: Collin Klopstein
Date: December 15, 2013
Filename: scene.js
Function List:
uniqueElemText(elemName)
Returns the unique content from HTML tags with the
tag name elemName. The list is sorted in alphabetical
ordered and returned as an array.
*/
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
addEvent(window, "load", characterBox, false);//calls createListBox() when page loads
var sourceDoc = document.getElementById("scene");
function uniqueElemText(elemName) {
elems = document.getElementsByTagName(elemName);
elemsArray = new Array();
for (var i=0; i<elems.length; i++) elemsArray[i]=elems[i].innerHTML;
elemsArray.sort();
for (i=0; i<elemsArray.length-1; i++) {
if (elemsArray[i]==elemsArray[i+1]) {
elemsArray.splice(i+1,1);
i--;
}
}
return elemsArray;
}
function characterBox(object, option) {
var boxHead = document.getElementById("characterList");//references div with id characterList
boxHead.innerHTML = "<p>Show Only Lines By:</p>";//adds <p> element to characterList div
var cList = document.createElement("select");//creates <select> element
boxHead.appendChild(cList);//appends <select> element to characterList div
var characters = uniqueElemText("h3");//creates characters array that calls uniqueElemText() and applies all h3 elements
var showAll = document.createElement("option");//creates option element
showAll.text = "Show All Character Lines";// value of option element
showAll.value = 'ALL';
cList.add(showAll);//adds showAll as option of selection list
for (var i = 0; i < characters.length; i++) {
var options = document.createElement("option");
options.innerHTML = characters[i];
cList.appendChild(options);
addEvent(cList, "change", sortLines, false);
}
}
function sortLines(e) {
var character = e.target.value || e.srcElement.value;
var displayStatus = "";//stores display status to displayStatus var; value empty string, default status applied by browser
var sourceDoc = document.getElementById("scene");
for (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) {
var nodeName = document.createElement("h3");
nodeName.innerHTML = sourceDoc[n];
var quote = document.createElement("blockquote");
quote.innerHTML = sourceDoc[n];
nodeName.appendChild(quote);
if (nodeName.innerHTML.indexOf("<h3>" + character + "</h3>") != -1) {
displayStatus = "none";
}
else
displayStatus = nodeName.innerHTML;
}
sourceDoc.innerHTML = displayStatus;
}
答案 0 :(得分：1)
更新的答案
这个javascript代码正在运行我测试过它
var hiddenElement = new Array();
function sortLines(e) {
var character = e.target.value || e.srcElement.value;
for ( var x = 0; x < hiddenElement.length; x++ ) {
hiddenElement[x].style.display = 'block'; // display all hidden elements
}
if (character === 'ALL') { return false; } // return from here if all is selected
var allheadingelm = document.getElementsByTagName("h3");
var otherelm = new Array();
for (var i = 0; i < allheadingelm.length; i++) {
if (allheadingelm[i].innerHTML.indexOf(character) == -1) {
otherelm.push(allheadingelm[i]);
}
}
for (var j = 0; j < otherelm.length; j++) {
for (var n = otherelm[j].nextElementSibling; n != null; n = n.nextElementSibling) {
if (n.tagName.indexOf("H3") != -1 && n.innerHTML.indexOf(character) != -1) {
break;
} else {
n.style.display = "none";
hiddenElement.push(n);
}
}
otherelm[j].style.display = 'none';
hiddenElement.push(otherelm[j]);
}
}
老答案
如果我已经正确理解它，你现在有包含PROSPERO和ARIEL的字符列表作为选项，你想要的是选择任何选项，它应该为你提供与所选选项相关的对话。有效的方法是在对话框/块引用中添加类
<h3>PROSPERO</h3> <blockquote class="PROSPERO">Dost thou think so, spirit? </blockquote>
<h3>ARIEL</h3> <blockquote class="ARIEL">Mine would, sir, were I human. </blockquote>
这样您就可以更轻松地使用
执行javascript选择document.getElementsByClassName
已经创建了一个小提琴，请检查。它不会准确，但逻辑将保持不变http://jsfiddle.net/raunakkathuria/45UT5/
如果你想要所有的造型，还有一个小提琴，第一个小提琴只会给你html