javascript - 如何循环动态生成js呢？我这有段代码，望大神指点

Question

$(".a").eq(0).on('keyup',function(){
  $('.b').eq(0).val($('.a').eq(0).val());
});
$(".a").eq(1).on('keyup',function(){
  $('.b').eq(1).val($('.a').eq(1).val());
});
$(".a").eq(2).on('keyup',function(){
  $('.b').eq(2).val($('.a').eq(2).val());
});

比如我想循环上述js代码，该怎么循环呢？谢谢

我自己试着写过下面这段，虽然没报错，但是无效的，keyup后a的值不会赋到b里面去。

var num=3;
if(var i=0;i<num;i++){
$(".a").eq(i).on('keyup',function(){
      $('.b').eq(i).val($('.a').eq(i).val());
    });
}

Answer 1

    $(document).on('keyup','.a',function(){
        _index=$('.a').index(this);
        $('.b').eq(_index).val($(this).val());
    });

Answer 2

事件处理函数其实是延迟执行函数，同时也存在闭包，所以i是等于3的，所以一般做法是采用事件委托的方式，其实也就是把点击事件给a的父元素

Answer 3

你提供的这段代码的运行结果应该是:
无论按了eq(0)，eq(1)还是eq(2),最后都是eq(2)的值被赋给了b

这是因为变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。

解决这个问题的一个思路是用闭包，或者直接使用ES6语法用let来声明变量i。
具体可以看这篇文章

如果还是不行，请再把问题描述的仔细些，我再修改答案。

Answer 4

闭包的问题……
解决方式：
1.使用匿名包装器（立即执行匿名函数）

var num=3;
for(var i=0;i<num;i++){
    (function (e) {
        $(".a").eq(e).on('keyup',function(){
            $('.b').eq(e).val($('.a').eq(e).val());
        });
    })(i);
};

2.从匿名包装器中返回一个函数

var num=3;
for(var i=0;i<num;i++){
    $(".a").eq(i).on('keyup',(function(e){
        return function(){
            $('.b').eq(e).val($('.a').eq(e).val());
        };
    })(i));
};

由于没有html代码，没做测试，题主可以自行检验一下。

和这个问题类似：用for 语句遍历 li ,点击 li 当按钮用不能输出当前 li 的序号

Answer 5

$('.a').each(function (index) {
    
    var that = $(this);
    that.on('keyup',function(){
        $('.b').eq(index).val(that.val());
    });

});