<html>
<head>
<title>test</title>
<style>
ul li{
float:left;
}
</style>
</head>
<body>
<ul id="myul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script language="javascript">
var nodes = this.myul.childNodes;
for (var i = 0 ; i < nodes.length ; i++ ){
var node = nodes[i];
node.onmouseover = function() {
node.style.backgroundColor = "red";
}
}
</script>
</body>
</html>问题说明：
本人想实现，当鼠标移到一个li元素的时候，实现背景变色。于是自己写了上面的代码，运行的时候发现不论怎么鼠标移动到哪个li上都是最后一个li变色。我知道在有的别的实现发现方法，自己也写了一段比较臃肿的代码实现了这个功能。如下
var nodes = this.myul,childNodes;
nodes[0].onmouseover = function() {
node.style.backgroundColor = "red";
}
nodes[0].onmouseout = function() {
node.style.backgroundColor = "white";
}
....我想知道为什么通过循环这种方式不行，难道事件不能储存么？
麻烦哪位朋友给个解释下，有解决方法更好了，谢谢大家。
for (var i = 0 ; i < nodes.length ; i++ ){
var node = nodes[i];
node.onmouseover = function() {
this.style.backgroundColor = "red";
}
node.onmouseout = function() {
this.style.backgroundColor = "transparent";
}
}你在function中不能用node. 否则，在循环结束时，node 永远是最后一个.
<title>TestAspPage</title>
<head></head>
<body onload="arrMain('S1');">
<SELECT NAME="S1" onchange="GetObj(this.options[selectedIndex].text ,'S2');" >
<OPTION value="0" selected>--请选择--</OPTION>
</SELECT><SELECT NAME="S2" onchange="GetObj(this.options[selectedIndex].text,'S3');" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<SELECT NAME="S3" onchange="GetObj(this.options[selectedIndex].text,'S4');" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<SELECT NAME="S4" onchange="GetObj(this.options[selectedIndex].text,'S5');" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<SELECT NAME="S5" disabled>
<OPTION value="0" selected >--请选择--</OPTION>
</SELECT>
<script language="javascript">
<!--//输入脚本内容
var t_list = new Array(1,2,3,4);//列值数组
var x_list = new Array(5,6,7,8);//列文本数组for(i=0;i<10;i++){
t_list[i] = i+1;
x_list[i] = "[项"+i+"]";
}//--->
</script>
<script language="javascript">
<!--//输入脚本内容
function arrMain(ob){//初始化首选项目
var x = eval(ob);
var l = t_list.length;
for(i=0;i<l;i++){//循环增加主列表项目
init(x,x_list[i],t_list[i]);
}//循环结束
}//结束初始化首选项目//--->
</script><script language="javascript">
<!--//输入脚本内容
function GetObj(v,ob){//
var o = eval(ob);
checkIsDisabled(o);
if(v=='--请选择--'){
ClearOption(o);
var l = o.length;
for(j=-1;l>j;l--){o.remove(l);}
var oOption = document.createElement("OPTION");
o.options.add(oOption);//开始增加
oOption.innerText = "--请选择--";//目标文本数据
oOption.value = "0";//目标值
oOption.selected = true;
o.disabled=true;
}//如果选择默认项则不进行操作
else{//选择项目进行操作
for(i=0;i<10;i++){
t_list[i] = i+1;
x_list[i] = v+"->"+"[项"+i+"]";
}
ClearOption(o);
arrMain(ob);
o.disabled=false;
}
}//结束
function init(ob,x,y){//给SELECT赋值项
var oOption = document.createElement("OPTION"); //设置需要增加OPTION的目标对像
ob.options.add(oOption);//开始增加
oOption.innerText = x;//目标文本数据
oOption.value = y;//目标值}
function checkIsDisabled(ob){//判断需要禁用的列项函数开始
//**********引用说明开始***************//
//将代码向后添加引用方式
//var a-n =eval(object);定义N个项目对象
//**********引用说明结束**************//var a = eval('S1');//定义级联选项，项目名称 对应表单的项目一
var b = eval('S2');//定义级联选项，项目名称 对应表单的项目二
var c = eval('S3');//定义级联选项，项目名称 对应表单的项目三
var d = eval('S4');//引用1
var e = eval('S5');//引用2
//如果第1列未选择则
if(a.value==0){//判断第1选项是否值为0，真则将其它所有先项置为只读
ClearOption(b);
b.disabled = true;
ClearOption(c);
c.disabled= true;
ClearOption(d);//引用1
d.disabled = true;//引用1
ClearOption(e);//引用2
e.disabled = true;//引用2
}//判断选项1值为0结束if(a.value!==0 && ob == b){//判断需要禁用的选项目
//**********引用说明开始***************//
//将代码向后添加引用方式
//此处条件为 首列值不为0,并且当前选中项目要与第N项相等才成立
//条件成立后需要将之后的各项全部置为只读并且清空内部数据
//ClearOption(object); //清除目标行
//object.disabled = true;//目标设置为只读
//**********引用说明结束**************//
ClearOption(c);
c.disabled = true;
ClearOption(d);//引用1
d.disabled = true;//引用1
ClearOption(e);//引用2
e.disabled = true;//引用2}//判断需要禁用的选项目结束
if(b.value!==0 && ob == c)//引用方式1
{
ClearOption(d);d.disabled = true;
ClearOption(e);e.disabled = true;
}//引用方式1结束
if(c.value!==0 && ob == d)//引用方式2
{ClearOption(e);e.disabled = true;}//引用方式2结束}//函数结束function ClearOption(ob){//清除选项
var l = ob.length;
ob.disabled=true;
for(i=1;i<l;l--){ob.remove(i);}
}
//--->
</script></body>
</HTML>
随便发的不在意