1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <link href="css.css" type="text/css" rel="stylesheet">
8 </head>
9 <body class="site1">
10 <div class="site">
11 <span id="sheng">浙江省</span>
12 <img src="imgs/jiantou.png">
13 <span id="shi">杭州市</span>
14 <img src="imgs/jiantou.png">
15 <span id="qu">上城区</span>
16 </div>
17 <div id="neirong">
18 <!--
19 <div class="site_list">
20 <p class="p6">上城区</p>
21 </div>
22 <div class="site_list">
23 <p class="p6">下城区</p>
24 </div>
25 <div class="site_list">
26 <p class="p6">江干区</p>
27 </div>
28 <div class="site_list">
29 <p class="p6">拱墅区</p>
30 </div>
31 <div class="site_list">
32 <p class="p6">西湖区</p>
33 </div>
34 <div class="site_list">
35 <p class="p6">滨江区</p>
36 </div>
37 <div class="site_list">
38 <p class="p6">萧山区</p>
39 </div>
40 <div class="site_list">
41 <p class="p6">余杭区</p>
42 </div>
43 <div class="site_list">
44 <p class="p6">桐庐县</p>
45 </div>
46 -->
47 </div>
48 <div class="site_btn">
49 <input type="button" value="确定" class="OK1">
50 <input type="button" value="取消" class="cancel">
51 </div>
52 </body>
53 <script>
54 var neirong = document.getElementById("neirong");
55 var sheng = document.getElementById("sheng");
56 var shi = document.getElementById("shi");
57 var qu = document.getElementById("qu");
58 sheng.onmousedown = function () {
59 sheng.style.textDecoration = "underline";
60 };
61 sheng.onmouseup = function () {
62 sheng.style.textDecoration="none";
63 };
64 qu.onclick = function () {
65 var daima = "<div class='site_list'><p class='p6'>桐庐县</p></div>" +
66 "<div class='site_list'><p class='p6'>桐庐县2</p></div>" +
67 "<div class='site_list'><p class='p6'>桐庐县3</p></div>";
68 neirong.innerHTML = daima;
69 /**作用域的问题**/
70 /**作用域的问题**/
71 /**作用域的问题**/
72 /**作用域的问题**/
73 /**作用域的问题**/
74 /**作用域的问题**/
75
76 for (var i=0;i<liebiao.length;i++){
77 (function (i) {
78 liebiao[i].onclick = function () {
79 qu.innerText = this.innerText;
80 };
81 })(i)
82 }
83
84 };
85 shi.onclick = function () {
86 var daima1 = "<div class='site_list'><p class='p6'>shishishi</p></div>" +
87 "<div class='site_list'><p class='p6'>XX市</p></div>" +
88 "<div class='site_list'><p class='p6'>是是是</p></div>";
89 neirong.innerHTML = daima1;
90 console.log(liebiao);
91 /**作用域的问题**/
92 /**作用域的问题**/
93 /**作用域的问题**/
94 /**作用域的问题**/
95 for (var i=0;i<liebiao.length;i++){
96 (function (i) {
97 liebiao[i].onclick = function () {
98 shi.innerText = this.innerText;
99 };
100 })(i)
101 }
102 };
103 var liebiao = document.getElementsByClassName("site_list");
104 </script>
105 </html>
作用域!!!
作用域!!!
作用域!!!
作用域!!!
for (var i=0;i<liebiao.length;i++){
(function (i) {
liebiao[i].onclick = function () {
shi.innerText = this.innerText;
};
})(i)
}
