函数传参的应用--修改文本的值


	重用代码：
	1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
	2、把核心主程序实现，用函数包起来
	3、把每组里不同的值找出来，通过传参实现

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>修改文本的值</title>
  6     <style type="text/css">
  7     *{
  8         margin: 0px;
  9         padding: 0px;
 10     }
 11     li{
 12         list-style: none;
 13         height: 40px;
 14         line-height: 40px;
 15         border: 1px #333 solid;
 16     }
 17     img{
 18         width: 16px;
 19         height: 16px;
 20         cursor: pointer;
 21     }
 22     p{
 23         display: inline-block;
 24         text-indent: 20px;
 25     }
 26     h2{
 27         background: #6BA542;
 28         text-indent: 20px;
 29 
 30     }
 31     div{
 32         width: 500px;
 33     }
 34     span{
 35         color: #9F8780;
 36         cursor: pointer;
 37     }
 38     .hide{
 39         display: none;
 40     }
 41     </style>
 42     <script type="text/javascript">
 43     window.onload=function(){
 44         var oUl=document.getElementsByTagName('ul')[0];
 45         var oLi=oUl.getElementsByTagName('li');
 46         var oInput=oUl.getElementsByTagName('input');
 47         var oImg=oUl.getElementsByTagName('img');
 48         var oP=oUl.getElementsByTagName('p');
 49         var oSpan=oUl.getElementsByTagName('span');
 50         /* 初始化页面 */
 51         for(var i=0;i<oInput.length;i++){
 52             oInput[i].value=oP[i].innerHTML;
 53             oInput[i].className = 'hide';
 54 
 55         }
 56         for(var i=0;i<oSpan.length;i++){
 57             oSpan[i].className='hide';
 58         }
 59         for(var i=0; i<oImg.length; i++) {
 60                 edit(oLi[i]);
 61             }
 62          function edit(li){
　　　　　　　　　　/*父级选取子元素*/
 63             var  aInput=li.getElementsByTagName('input')[0];
 64             var aImg=li.getElementsByTagName('img')[0];
 65             var aP=li.getElementsByTagName('p')[0];
 66             var aSpan1=li.getElementsByTagName('span')[0];
 67             var aSpan2=li.getElementsByTagName('span')[1];
 68             aImg.onclick=function(){
 69                 aP.className = aImg.className = 'hide';
 70                 aInput.className='';
 71                 aSpan2.className=aSpan1.className='';
 72 
 73             }
 74             aSpan1.onclick=function(){
 75                 aP.innerHTML=aInput.value;
 76                 aP.className=aImg.className='';
 77                 aInput.className=aSpan2.className=aSpan1.className='hide';            
 78             }
 79             aSpan2.onclick=function(){
 80             aP.className = aImg.className = ''; 
 81             aInput.className=aSpan2.className=aSpan1.className='hide';
 82                 
 83             }
 84 
 85          }   
 86 
 87     }
 88     </script>
 89 </head>
 90 <body>
 91     <div>
 92         <h2>分类名称</h2>
 93         <ul>
 94             <li>
 95             <p >妙味远程课堂</p>
 96             <img src="spen.png">
 97             <input type="text" >
 98             <span>保存</span>
 99             <span>取消</span>
100             </li>
101             <li>
102             <p >妙味远程课堂</p>
103             <img src="spen.png">
104             <input type="text" >
105             <span>保存</span>
106             <span>取消</span>
107             </li>
108         </ul>
109     </div>
110 </body>
111 </html>

相关阅读:
Python实例1-Collatz 序列
 Git 教程
 python 算法基础
 认识 flask框架及介绍
 python 虚拟环境
 Numpy基本操作学习
 Jupyter Notebook 快捷键指南
 Gallery——Matplotlib
list.pop()函数操作头部与尾部的计时试验
 list 与 dict 的in操作比较试验
原文地址：https://www.cnblogs.com/15fj/p/7296005.html