js里面的枚举问题

最新推荐文章于 2024-11-10 02:55:26 发布

原创最新推荐文章于 2024-11-10 02:55:26 发布 · 904 阅读

0 ·

CC 4.0 BY-SA版权

js的学习专栏收录该内容

21 篇文章

订阅专栏

枚举法：就是利用循环加上if语句。本质上就是在原来有的东西里面进行一一的对比，并且进行相应的操作

<!DOCTYPE html>
<html>
<head>
	<title>关于枚举法的应用</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding:0px;
			margin:0px;
		}
		a{
			text-decoration: none;
			color:black;
			width:75px;
			height:25px;
			line-height: 25px;
			text-align: center;
			display:block;
			float:left;
		}
		a:hover{
			background-color: black;
			color:white;
		}
		#clear{
			clear:both;
		}
		ul{
			width:350px;
			height:500px;
			border:1px solid black;
			display: block;
			padding-left:30px;
		}
		li{
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 20px;
			font-family: "楷体";
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			//获得元素
			var ap=document.getElementsByTagName('a');
			var uli=document.getElementById('uli');
			//这里的li是动态创建的
			var lli=document.getElementsByTagName("li");
			for (var i = ap.length - 1; i >= 0; i--) {
				ap[i].onclick=function(){
					//可以添加在ul里面
					if(meijv(this.innerHTML)){
						var oli=document.createElement("li");
						oli.innerHTML=this.innerHTML;
						uli.appendChild(oli);
						//这里实现的就是每次将添加的东西添加在最前面
						if(!lli[0]){   //第一个元素不存在的话，直接进行添加就可以了
							uli.appendChild(oli);
						}
						else{       //存在第一个元素，将他插入在第一个位置
							uli.insertBefore(oli,lli[0]);
						}
					}
					else{
						meijv1(this.innerHTML);
					}
				}
			}

			//如果已经存在那么就返回false
			//枚举法
			function meijv(text){
				var result=true;
				for (var i = lli.length - 1; i >= 0; i--) {
					if(lli[i].innerHTML==text){
						result=false;
					}
				}
				return result;
			}


			//即便是才存在的，如果再点击的时候将他添加在最前面的位置上
			function meijv1(text){
				for (var i = lli.length - 1; i >= 0; i--) {
					if(lli[i].innerHTML==text){
						uli.insertBefore(lli[i],lli[0]);
					}
				}

			}

		};
	</script>
</head>
<body>
<h2>去哪旅行</h2>
<a href="#">北京</a>
<a href="#">天津</a>
<a href="#">上海</a>
<a href="#">广州</a>
<a href="#">台湾</a>
<a href="#">香港</a>
<div id="clear"></div>
<ul id="uli">
</ul>
</body>
</html>