闭包再学习、发表评论 

 1 <body>
 2     <button>按钮1</button>
 3     <button>按钮2</button>
 4     <button>按钮3</button>
 5     <button>按钮4</button>
 6     <button>按钮5</button>
 7     <button>按钮6</button>
 8 
 9     <script>
10         window.onload = function (ev) {
11             var buttons = document.getElementsByTagName('button');
12             for (var i = 0; i < buttons.length; i++) {
13                 console.log(i + '<br>');
14                 (function (i) {
15                     buttons[i].onclick = function (ev1) {
16                         alert('点击了第' + i + '个按钮！');
17                     }
18                 })(i)
19             }
20         }
21     </script>
22 </body>
 1 <body>
 2     <div id="box">
 3         <div class="box-top">
 4             <label>
 5                 发表评论：
 6                 <textarea id="my_textarea" cols="60" rows="10"></textarea>
 7             </label>
 8             <button id="btn">发表</button>
 9         </div>
10         <ul id="ul"></ul>
11     </div>
12 <script>
13     window.addEventListener('load', function (ev) {
14          $('btn').addEventListener('click', function (ev1) {
15              var my_textarea = $('my_textarea');
16               // 1. 获取输入框中的内容
17               var content = my_textarea.value;
18              // 2. 判断
19              if(content.length === 0){
20                  alert('请输入评论的内容~');
21                  return;
22              }
23 
24              // 3. 创建li标签放入ul
25              var ul = $('ul');
26              var li = document.createElement('li'); 
27              li.innerHTML = content + '<a href="javascript:;">删除</a>';
28              ul.insertBefore(li, ul.children[0]);
29 
30              // 4. 清除输入框中的内容
31              my_textarea.value = '';
32 
33 
34              // 5. 删除评论
35              var as = ul.getElementsByTagName('a');
36              for (var i = 0; i < as.length; i++) {
37                  var a = as[i];
38                  a.addEventListener('click', function (evt) {
39                      this.parentNode.remove();
40                  });
41              }
42          });
43 
44 
45         function $(id) {
46             return typeof id === 'string' ? document.getElementById(id) : null;
47         }
48     });
49 </script>
50 </body>

 

posted @ 2019-07-15 23:20  疏影横斜水清浅  阅读(171)  评论(0)    收藏  举报