首页 > 如何循环动态生成js呢?我这有段代码,望大神指点

如何循环动态生成js呢?我这有段代码,望大神指点

$(".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());
    });
}

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

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

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

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


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

});

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

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


闭包的问题……
解决方式:
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 的序号

【热门文章】
【热门文章】