| |
|
|
重用代码： |
| |
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>
