原生js给数组中每个对象都绑定一个事件

  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)
         }
时间: 2024-10-17 04:47:16

原生js给数组中每个对象都绑定一个事件的相关文章

Phaser中很多对象都有一个anchor属性

游戏要用到的一些图片.声音等资源都需要提前加载,有时候如果资源很多,就有必要做一个资源加载进度的页面,提高用户等待的耐心.这里我们用一个state来实现它,命名为preload. 因为资源加载进度条需要一个进度条的背景图片,所以在制作这个state前,我们还需要另一个最基础的state,用来加载那张进度条图片,我们命名为boot. 复制代码 game.States.boot = function(){ this.preload = function(){ game.load.image('loa

让NSArray数组中每个对象都调用的方法

1. [array valueForKey:@"title"]; //Returns an array containing the results of invoking valueForKey: using key on each of the array's objects. 使数组中的每个对象都调用valueForKey:方法,并且将每个对象调用方法的结果依次存入一个新的数组中,然后返回 2. [self  setValuesForKeysWithDictionary:dict

js在数组中查找是否存在某一个数值

目前想到的方法有这么几个 1.indexOf()  -> ES5 const array = ['apple', 'banance', 'orange'] array.indexOf('apple')    // 0 存在 array.indexOf('strawBerry')     // -1不存在 2.find()   -> ES6 const array = ['apple', 'banance', 'orange'] array.find(obj => obj == 'bana

jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字

jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组 由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大多是一些纯html和js,很少用到jstl的一堆东西,后端也仅仅处理一些前端的post.get请求或页面跳转,无须以往繁琐的xml路径映射和filter过滤. 不过有时也会用到servlet作用域中的一些东西,比如某个固定的值.上下文路径等等~,不过这些东西大多数也仅限于取值而不是设置值(或对象),

js去除数组中的重复值

hasOwnProperty(property) 方法 JavaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性. 使用方法: object.hasOwnProperty(proName) 其中参数object是必选项.一个对象的实例.proName是必选项.一个属性名称的字符串值. 如果 object 具有指定名称的属性,那么JavaScript中hasOwnProperty函数方法返回 true:反之则返回 false.此方法无法检查该对

使用JavaScript从数组中删除对象

如何从数组中删除对象? 我希望从someArray删除包含名称Kristian的对象. 例如: someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}]; 我要实现: someArray = [{name:"John", lines:"1,19,26,96"}]; #1楼 在数组上

20150310-删除数组中原有对象

一.删除数组中原有对象 [self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

原生js获取css中class的方法

function getByClass( className, context) { var context = context || document; if( context.getElementsByClassName) { return context.getElementsByClassName(className); } var nodes = context.getElementsByTagName("*"); ret=[]; for( var i=0; i<nod

用 inArray 查找数组中的对象

inArray 是jquery 用来数组查重的函数,很多时候数组中含有对象,直接查找是找不到的,必须转换成 JSON字符串来进行查找. $map 在这里简化了很多代码. var arr = [ {"id" : "1", "description" : "one"}, {"id" : "2", "description" : "two"}, {&qu