哒哒哒Q 2021-09-12 18:25 采纳率: 50%
浏览 37
已结题

js中的事件和循环机制

我想给数组中的指定元素添加click事件,并且内层循环与外层循环索引值相同时对元素进行改变,错误代码如下

        var yunsuan = document.querySelectorAll(".count span")
        var number = document.querySelectorAll(".count input")   
        var k = 0     
        for(var i = 0;i<yunsuan.length;i=i+3){
            yunsuan[i].addEventListener("click",function(){
                for(var j = 0;j<number.length;j++){
                    if (j===k) {
                        number[j].value--
                        console.log(number[j].value);
                    }
                }
            })
            k++            
        }

因为代码中的外层循环会先执行完毕再进行事件的绑定,所以k的值直接变成了最大值,然后事件中的循环就无法对k进行判断了,请问各位这种问题怎么解决

  • 写回答

2条回答 默认 最新

  • 关注

    你这个是类似需要在事件内使用事件外的循环变量的问题。
    当事件触发时,那个循环早就结束了,那时的i的值已经是循环最大值加1了。
    所以需要用一些方式保存住当前循环的i的值。

    方案一:用闭包保存住当前循环的i的值

    for (var i = 0; i < arr.length; i++) {
        (function(i){
            arr[i].onclick = function () {
                alert(i);
            }
        })(i);
    }
    

    方案二:用let块作用域变量

    for (var i = 0; i < arr.length; i++) {
        let k = i;
        arr[i].onclick = function () {
            alert(k);
        }
    }
    

    ps:IE11中在for语的()内声明的let是整个循环体中共用的,只有在{}内声明的let才是每次循环都独立的。
    非ie的浏览器中可以在中在for语的()内声明let

    for (let i = 0; i < arr.length; i++)
    

    方案三:为事件元素设置一个index属性,在事件函数内通过this获取当前对象并访问index属性。

    for (var i = 0; i < arr.length; i++) {
        arr[i].index = i;
        arr[i].onclick = function () {
            alert(this.index);
        }
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 9月20日
  • 已采纳回答 9月12日
  • 创建了问题 9月12日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题