精华内容
下载资源
问答
  • 2018-09-07 17:17:10
    // 控制准运证信息的展开
        for (var i=0; i<=res.info.navicerts.length; i++) {
    	  (function(i) {
    		 $('#collapse-btn'+i).toggle(function(){
    		    $('#allow-list-wrapper'+i).hide();
    			$('#layui-icon'+i).html('&#xe61a;');
    		 },function(){
    			$('#allow-list-wrapper'+i).show();
    			$('#layui-icon'+i).html('&#xe619;');
    		 });
    	  })(i);
    	}; 

     

    更多相关内容
  • 先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { ...而绑定事件中,则不一样,同一个元素上,即使绑定再多的点击事件,都会全部执行。也就是说,普通事件中的o
  • 响应一堆相似的事件,但是每个事件的参数都不同,这种情况下就可以使用JavaScript 在for循环中绑定事件,下面有个不错的示例,大家可以参考下
  • IE8不支持indexOf,因此写一个for循环来判断是否存在,下面是代码,经测试还不错
  • JS中for循环绑定事件

    千次阅读 2020-11-10 11:21:36
    网页有五个按钮,需求为:点击按钮,将按钮的索引值输出。 初学JS时遇到的问题,今天学习bind方法时又想起来了,分享一下。 先看一下代码 var btns = document.querySelectorAll('button') for (var i = 0; i ...

    在网页中有五个按钮,需求为:点击按钮,将按钮的索引值输出。

    初学JS时遇到的问题,今天学习bind方法时又想起来了,分享一下。

    先看一下代码

      var btns = document.querySelectorAll('button')
        for (var i = 0; i < btns.length; i++) {
        	btns[i].onclick = function () {
        		  console.log(i)
        	 }
        }
    

    此段代码,先是获取到所有的按钮,然后用for循环依次给每个按钮绑定点击事件。点击按钮之后,响应的i会被输出,也就是输出索引值。

    真是的是这样吗??当然不是。不论点击那个按钮,输出的结果都为 5。

    因为JS中点击事件为异步函数,JS会先执行那些非异步函数(同步函数)。那么,也就是说,for循环和先循环五次,给每个按钮绑定了点击事件。注意了,绑定点击事件的时候并不会执行点击事件,而是会等待点击事件触发时才执行。也就是说,当我们点击按钮,触发点击事件的时候,for循环已经进行了五次,i = 5,所以每个按钮输出的结果均为 5.

    想修改正确,其实很简单。
    在绑定点击事件的上一行,加上这句话即可,手动给按钮添加一个索引

            btns[i].index = i;
    

    在输出时,加上这句话即可输出对应的索引。

            console.log(this.index)
    
    展开全文
  • JavaScriptfor 循环的onclick事件 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type='text/css'>
            .active {
                color: rgb(189, 55, 55);
            }
        </style>
    </head>
    <body>
        <ul>
            <li class='a'>a</li>
            <li class='b'>b</li>
            <li class='c'>c</li>
        </ul>
        <script type='text/javascript'>
            var Li = document.querySelectorAll('li');
            for (var i = 0; i < Li.length; i++) {
                Li[i].onclick = function() {
                    for (var i = 0; i < Li.length; i++) {
                        Li[i].className = '';
                    }
                    this.className = 'active';
                }
            }
        </script>
    </body>
    </html>
    

    最开始看for循环里面的onclick代码时,我百思不得其解,为什么点击相应的li时,颜色会改变,后来才知道原来是运行for循环里面的onclick代码时,对每个li都产生了一个监听,只要我们一点击,那么就会执行function函数,改变颜色
    在这里插入图片描述

    展开全文
  • js中for循环点击事件(闭包)

    千次阅读 2019-02-13 09:42:37
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&...text/javascript"&gt;
    <!DOCTYPE html>
    <html lang="en">
    <head>
          <meta charset="utf-8">
          <title></title>
          <script type="text/javascript">
                    function onMyLoad(){
                         var arr = document.getElementsByTagName("p");
                         for(var i = 0; i < arr.length; i++){
                                arr[i].onclick = function(){
                                      alert(i);//5次均输出5
                                }
                         }
                    }
           </script>
    </head>
    <body "onMyLoad()">
              <p>0</p>
              <p>1</p>
              <p>2</p>
              <p>3</p>
              <p>4</p>
    </body>
    </html>
    

    以上代码期望依次输出0,1,2,3,4,实际却输出5,5,5,5,5,这是因为闭包导致,下来来具体介绍:
    for循环是一个外部闭包,依次绑定的点击事件是一个函数实例,也产生了一个闭包域,它引用了外部闭包的变量i,外部闭包域中i的最终值为5,点击事件触发时引用外部闭包变量i(此时i=5),所以输出的值全为5。

    解决方案
    方法一:增加若干个对应的闭包域空间(采用匿名函数实现)专门用来存储原先需要引用的内容(下标值),只限于基本类型(基本类型值传递,对象类型引用传递)

    for(var i = 0; i<arr.length; i++){
           (function (arg){//这个函数对象有一个本地私有变量arg(形参),该函数的function scope的closure对象属性有两个引用:arr和i。i的值随外部改变,但是本地的私有变量(形参)arg不会受影响,其值在一开始被调用时就决定了
                arr[i].onclick = function () {//onclick函数实例的function scope的closure对象属性有一个引用arg
                      alert(arg);//只要外部空间的arg不变,这里的引用值就不会改变
                }
           })(i);//立即执行匿名函数,传递下标i(实参)
    }
    

    方法二:将下标作为对象属性(name:“i”,value:i的值)添加到每个数组项(p对象)中

    for(var i=0; i<arr.length; i++){
           //为当前数组项(当前p对象)添加一个名为i的属性,值为循环体i变量的值
           //此时当前p对象的i属性并不是对循环体的i变量的引用,而是一个独立p对象的属性,属性值在声明的时候就确定了
           arr[i].i = i;
           arr[i].onclick = function (){
                  alert(this.i);
           }
    }
    

    方法三:增加若干个对应的闭包域空间用来存储下标。新增的匿名闭包空间内完成事件绑定。

    //绑定的函数中的function scope中的closure对象的引用arg是指向将其返回的匿名函数的私有变量arg
    for(var i = 0; i<arr.length; i++){
          arr[i].onclick = (function(arg){
                  return function () {
                         alert(arg);
                  }
          })(i);
    }
    

    方法四:使用ES6的let关键字

    "use strict";
    var arr = document.getElementsByTagName("p");
    for(var i = 0; i<arr.length; i++){
          let j = i;//块级变量
          arr[i].onclick = function () {
                 alert(j);
          }
    }
    

    个人推荐后两种方法。

    展开全文
  • 废话不多说了,直接给大家贴代码了,具体代码如下所述: ...以上所述是小编给大家介绍的JS 循环li添加点击事件 (闭包的应用),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的。
  •  web,我们常常需要为某一类型的元素添加事件,这时,常用for循环。对于刚刚接触不久的小白总是容易这里犯错,比如我。因此今天这里记录一下自己的踩过的坑,希望对大家有所帮助。  假如我们需要为页面上...
  • 1、最近开发遇到一个问题,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5。 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf...
  • 使用百度地图api进行开发时遇到了需要给地图上的点标记添加监听事件的需求,于是使用java开发时的习惯在for循环中给marker按钮添加监听事件,使用如下代码 for(var item in survs){ var markerName=survs[item...
  • Javascriptfor循环中的绑定事件 先来看一段代码: <div class="box"> <ul> <li> <img src="images/4.jpg" alt=""> </li> <li> <img src="images/9.jpg" alt="">...
  • 原文 | https://medium.com/techtofreedom/4-ways-to-write-for-loops-in-javascript-d0db6aa8f7b6翻译 |...
  • 相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变;但是往往所有v-for循环出的元素都会变化。如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会...
  • 循环给每行表格添加点击事件点击后变色,取消后恢复 问题描述: 奇数行点击之后样式无法恢复 // 元素+属性选择器 var checkboxs = document.querySelectorAll("input[name=check]"); for (var i = 0;i < ...
  • for循环绑定事件 weixin_43625760 2020-06-08 01:02:16 ...
  • 使用for循环添加点击事件时,获取i值的方法 比如页面上有一个ul,数个li,现在给li添加点击事件。 var li = document.getElementsByTagName("li");  for(var i = 0; i < li.length; i++) { li[i]....
  • 最简单的方式就是分开写,一个按钮对应一个点击事件函数,这样虽然通俗易懂,但是这样的代码量是十分大的,既然我们获得的是一个事件的数组,为什么不用一个for循环来解决呢,于是就有了下面这一种写法(本代码...
  • 想法:想将外面的i传到onclick事件中去 一开始的错误做法: <script type="text/javascript"> //得到class为a的标签list数组 var zujian = document.getElementsByClassName("a"); //遍历 for (var i ...
  • JS在for循环中绑定事件的失效问题

    千次阅读 2018-08-14 13:30:09
    使用for循环去绑定onclick事件,但js绑定失效. 如下图 var btns = document.getElementsByTagName('input'); for (var i = 0; i &amp;amp;amp;amp;lt; btns.length; i++) {//for循环遍历...
  • 在for循环中事件里面会发现无法使用循环变量i。 <div> <span>1</span> </div> <div> <span>2</span> </div> <div> <span>3</span> ...
  • javascript中for循环编写表格

    千次阅读 2019-07-19 09:01:30
    script type="text/javascript"> var row=Number(prompt("请输入行数")); var col=Number(prompt("请输入列数")); document.write("<table>"); for (j=0;j<=row;j++) { if (j%2==0) { ...
  • for(var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, 1000); }; 运行这段代码会发现,程序1秒后输出了3个3。(不但没有每隔一秒输出,而且输出的数字还全都是3) 原因分析: 这跟...
  • vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组的元素 (2)(value,index) in arr 遍历数组的元素和数组下标 运行代码: <body> <li v-for=value>{{value}}</li><br>  ...
  • 主要介绍了使用Vue v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下
  • JavaScript中需要注意for循环中的i

    千次阅读 2022-03-25 22:33:05
    JavaScript中for循环页面加载完成之后立即执行,而响应函数会超链接被点击时才执行 当响应函数执行时,for循环早已执行完毕 因此,响应函数里面输出的i全部都等于allA[i].length,而不是超链接对应的i ...
  • 下面代码是为了实现一个类似相册的功能, 为了加快速度只加载小图, 当用户点击小图的时候才下面的框显示对应的大图. 初始的大图是一张空白图片. <!DOCTYPE html> <html lang="en"> <head> &...
  • ![图片说明](https://img-ask.csdn.net/upload/202008/18/1597765375_19614.png)![图片说明]... 第一份代码控制台输出一个1 第二份代码控制台输出四个1 ...爸爸救救我
  • ![![图片说明](https://img-ask.csdn.net/upload/201811/09/1541749603_855968.png)图片说明]... 感觉没啥错,我看跟老师的也一样,只不懂为啥aLi是undefined

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,273
精华内容 37,709
关键字:

在js中for循环中的点击事件