1:什么是“对象化”
2:用cgi.cgi?a=a1&b=b3&c=c2，不如用<input type=hidden name=a><input type=hidden name=b>容易处理
3:如果a,b,c已经赋值好了，然后点击b中的cancel怎样处理？点击a中的子对象又怎样？
2:用cgi.cgi?a=a1&b=b3&c=c2，不如用<input type=hidden name=a><input type=hidden name=b>容易处理
3:如果a,b,c已经赋值好了，然后点击b中的cancel怎样处理？点击a中的子对象又怎样？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.active {background-color:red;}
.show {display:block;}
.hide {display:none;}
</style>
</head><body>
<form action="cgi.cgi"><ul id="a" class="show">
<li><a href="#" value="a1">a1</a></li>
<li><a href="#" value="a2">a2</a></li>
<li><a href="#" value="a3">a3</a></li>
</ul><ul id="b" class="hide">
<li><a href="#" value="b1">b1</a></li>
<li><a href="#" value="b2">b2</a></li>
<li><a href="#" value="b3">b3</a></li>
<li><a href="#" value="b4">b4</a></li>
<li><a href="#" value="cancel">cancel</a></li>
</ul><ul id="c" class="hide">
<li><a href="#" value="c1">c1</a></li>
<li><a href="#" value="c2">c2</a></li>
<li><a href="#" value="c3">c3</a></li>
<li><a href="#" value="cancel">cancel</a></li>
</ul><input type="submit" value="submit" class="hide" id="btnSubmit" />
<script language="JavaScript">
<!--
/*
要求：开始只显示a，点击其中任意一子对象时，赋予该对象class="active"；
同时展开b，可通过点击cancel关闭b并撤消上一对象a的子对象class="active"的属性；
以此类推；
选择完最后一对象n的子对象nx时，显示submit；
点击submit可完成提交，诸如cgi.cgi?a=a1&b=b3&c=c2；
程序要求对象化。分析：基本对象是 ul，其下包含 li 集合。
*/function Item(oUl)
{
this.id = oUl.id;
this.optionColletion = oUl.childNodes;
this.selectedValue = null; for (var i=0; i<this.optionColletion.length; i++)
{
if (this.optionColletion(i).firstChild.className == "active")
{
this.selectedValue = this.optionColletion(i).firstChild.value;
}
this.optionColletion(i).firstChild.onclick = function()
{
// this 代表 <a>
event.cancelBubble = true;
// this.parentNode 代表 <li>
// this.parentNode.parentNode 代表 <ul>
BlackOut(this.parentNode.parentNode); if (this.value != "cancel")
{
this.className = "active";
this.parentNode.parentNode.selectedValue = this.value; var nextItem = oUl.nextSibling; if (nextItem.tagName=="UL" && nextItem.className=="hide")
{
nextItem.className="show";
new Item(nextItem);
}
else if (nextItem.tagName=="INPUT" && nextItem.className=="hide" && nextItem.value=="submit")
{
nextItem.className="show";
}
}
else
{
var currentItem = this.parentNode.parentNode; RecursionHideDownwards(currentItem); currentItem.className="hide"; var previousItem = currentItem.previousSibling; if (previousItem.tagName=="UL" && previousItem.className=="show")
{
BlackOut(previousItem);
}
}
};
} return oUl;
}function BlackOut(givenItem)
{
var optionColletion = givenItem.childNodes; for (var i=0; i<optionColletion.length; i++)
{
optionColletion(i).firstChild.className = "";
}
}function RecursionHideDownwards(givenItem)
{
var nextItem = givenItem.nextSibling; if (nextItem.tagName=="UL" && nextItem.className=="show")
{
BlackOut(nextItem);
nextItem.className="hide"; RecursionHideDownwards(nextItem);
}
else if (nextItem.tagName=="INPUT" && nextItem.className=="show" && nextItem.value=="submit")
{
nextItem.className="hide";
}
}document.all.btnSubmit.onclick = function()
{
var selectedValueString = "";
var oItem;
var itemCollection = document.getElementsByTagName("UL")
for (var i=0; i<itemCollection.length; i++)
{
oItem = new Item(itemCollection(i));
selectedValueString += oItem.id + "=" + oItem.selectedValue + ";";
} alert("SelectedValueString: " + selectedValueString); return false;
};new Item(a);//-->
</script>
</form></body>
</html>
这个只是个模型，面向过程去实现它并不困难。
yixianggao的方法正是“对象化”的方法。
先结帐，再研究。