1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10 <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
11 <script>
12
13
14 // 需求 - 点击对应的选项出现对应的数字
15 // 实际效果：一次性循环了，每次都是最后加一
16 // 闭包前,每次都是弹出4
17 // $(document).ready(function () {
18 // var spans = $("#divTest span");
19 // for (var i = 0; i < spans.length; i++) {
20 // spans[i].onclick = function () {
21 // alert(i);
22 // }
23 // }
24 // });
25
26
27 // 需求 - 点击对应的选项出现对应的数字
28 // 实际效果：一次性循环了，每次都是最后加一
29 // 闭包后，得到想要的效果了,每次暂存1,而不是一次性循环
30 $(document).ready(function () {
31 var spans = $("#divTest span");
32 for (var i = 0; i < spans.length; i++) {
33 (function (num) {//匿名函数表达式
34 spans[i].onclick = function () {
35 alert(num);
36 }
37 })(i);//立即执行，并且把i的值传给num
38 }
39 });
40
41
42 </script>
43 <style>
44 #divTest {
45 margin-top: 30px;
46 margin-bottom: 40px;
47 }
48
49 span {
50 border-color: #3C0;
51 border-style: solid;
52 margin-bottom: 5px;
53 padding: 10px 30px 10px 30px;
54 border-radius: 10px
55 }
56 </style>
57 <title>无标题文档</title>
58 </head>
59
60 <body>
61 <div id="divTest">
62 <span>0</span>
63 <span>1</span>
64 <span>2</span>
65 <span>3</span>
66 </div>
67 </body>
68
69 </html>
