需求: 为所有的 li 节点添加 onclick 响应函数 , 实现 city 子节点和 game 子节点对应位置的元素的互换;
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function()
{
var liNodes = document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++)
{
liNodes[i].index = i;
//为每一个 li 节点添加 Onclick 响应函数 点击交换
liNodes[i].onclick = function()
{
var targetIndex = 0;
if(this.index<4)
{
targetIndex = 4+this.index;
}
else
{
targetIndex = this.index-4;
}
//克隆的index属性虽然都带上了,但是在交换的过程每个node的index属性发生了变化,
//需要进行互换,需要在对index属性 进行重新交换
var tempIndex = this.index;
this.index = liNodes[targetIndex].index;
liNodes[targetIndex].index = tempIndex;
replaceNode(this,liNodes[targetIndex]);
};
}
};
//自定义的交换节点的方法
function replaceNode(Node00 , Node01)
{
var aParent = Node00.parentNode;
var bParent = Node01.parentNode;
if(aParent && bParent)
{
var cloneNewNode00 = Node00.cloneNode(true);
//克隆的节点 要带上原节点onclick属性 和index属性也带上
cloneNewNode00.onclick = Node00.onclick;
cloneNewNode00.index = Node00.index;
bParent.replaceChild(cloneNewNode00,Node01);
aParent.replaceChild(Node01,Node00);
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="nj">南京</li>
<li id="xj">西京</li>
<li id="dj">东京</li>
</ul>
<br><br>
<p>你喜欢哪类手机?</p>
<ul id="game">
<li id="apple">苹果</li>
<li id="sum">三星</li>
<li id="huawei">华为</li>
<li id="xiaomi">小米</li>
</ul>
<br>
name:<input type="text" name="username" id="name" value="atguigu">
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
<form action="dom-7.html" name="myfrom">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏
name:<input type="text" name="name"/>
<input type="submit" value="Submit" id="submit">
</form>
</body>
</html>