您的位置：首页 > Web前端 > JavaScript

JS-案例-节点交换

2015-09-03 11:43 846 查看

需求: 为所有的 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航