参数的运用小案例

如图：类似功能利用函数传参可以很容易的实现，这里主要是记录思路，以便日后解决类似的问题

第一步是布局，这个不用再说了。

第二步：拿到父级 ul ,根据这个ul，拿到子级的 li ，如下将子的li的一个传到参数中，当做一个li，将这个li的功能实现之后，在分别给函数传参数就好了

var oUl = document.getElementById('list');

var aLi = oUl.getElementsByTagName('li');
			
test(aLi[0]);

function test(oLi){}

            test(aLi[0]);
			test(aLi[1]);
			test(aLi[2]);
			test(aLi[3]);
			test(aLi[4]);

重用代码：

1、尽量保证html代码结构一致，可以通过父级选择子级元素

2、把核心主程序实现，用函数包起来。

3、把每组里不同的值找出来，通过传参实现。

下面贴一下这个小案例的全部代码;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		h3{
			width: 300px;
			height: 30px;
			line-height: 30px;
			padding: 0 0 0 15px;
			border: 1px solid #000;
			background-color: RGB(94,153,56);
			color: #fff;
		}
		ul{
			width: 300px;
			line-height: 40px;
			border: 1px solid #000;
			padding: 0 0 0 15px;
		}
		li{
			list-style: none;
			height: 40px;
			line-height: 40px;
		}
		li a{
			width: 30px;
			height: 40px;
			line-height: 40px;
			position: absolute;
			left: 280px;
			display: inline-block;
			background-image: url(img/xiu.png);
			background-position: 5px center;
			background-repeat: no-repeat;
		}
		li input{
			display: none;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oUl = document.getElementById('list');
			var aLi = oUl.getElementsByTagName('li');
			
			test(aLi[0]);
			test(aLi[1]);
			test(aLi[2]);
			test(aLi[3]);
			test(aLi[4]);
			
			function test(oLi){
				var oSpan = oLi.getElementsByTagName('span')[0];
				var oA = oLi.getElementsByTagName('a')[0];
				var aInput = oLi.getElementsByTagName('input');
				var text = "";
				
				oA.onclick = function(){
					oSpan.style.display = "none";
					for(var i=0;i<aInput.length;i++){
						aInput[i].style.display = 'inline-block';
					}
					text = oSpan.innerHTML;
					aInput[0].value = text;
				}
				aInput[1].onclick = function(){
					oSpan.style.display = "inline-block";
					for(var i=0;i<aInput.length;i++){
						aInput[i].style.display = 'none';
					}
				}
				aInput[2].onclick = function(){
					oSpan.style.display = "inline-block";
					for(var i=0;i<aInput.length;i++){
						aInput[i].style.display = 'none';
					}
					text = aInput[0].value;
					oSpan.innerHTML = text;
				}
				
			}
			
			
		}
	</script>
	<body>
		<h3>分类名称</h3>
		<ul id="list">
			<li>
				<span>妙味远程课堂~</span>
				<a href="javascript:;"></a>
				<input type="text"/>
				<input type="button" value="还原"/>
				<input type="button" value="保存"/>
			</li>
			<li>
				<span>妙味远程课堂~</span>
				<a href="javascript:;"></a>
				<input type="text"/>
				<input type="button" value="还原"/>
				<input type="button" value="保存"/>
			</li>
			<li>
				<span>妙味远程课堂~</span>
				<a href="javascript:;"></a>
				<input type="text"/>
				<input type="button" value="还原"/>
				<input type="button" value="保存"/>
			</li>
			<li>
				<span>妙味远程课堂~</span>
				<a href="javascript:;"></a>
				<input type="text"/>
				<input type="button" value="还原"/>
				<input type="button" value="保存"/>
			</li>
			<li>
				<span>妙味远程课堂~</span>
				<a href="javascript:;"></a>
				<input type="text"/>
				<input type="button" value="还原"/>
				<input type="button" value="保存"/>
			</li>
		</ul>
	</body>
</html>

参数的运用小案例

猜你喜欢