我有一个简单的for循环:

for (var i = 0; i < 10; i++) {
    $('#input' + i).on('blur', function() {
        var values = $('#input' + i).val();
        console.log(values);
    });
}


我想获取我的#input的值,如果我在输入中写了一些东西,我只会在控制台中得到未定义的消息。

但是,如果我执行以下操作,为什么会得到正确的结果?

for (var i = 0; i < 10; i++) {
    $('#input' + i).on('blur', function() {
        var values = $('#input0').val();
        console.log(values);
    });
}


我该如何将该值放在该循环中的另一个id上?

最佳答案

如果您确实需要使用for循环,请尝试分离逻辑,并且必须在事件内部使用事件委托.on()并使用jQuery对象$(this),因为该对象包含当前模糊的输入:



for(var i = 0; i< 6; i++) {
  $('body').on('blur', '#input'+i, getValue);
}

function getValue() {
  var values = $(this).val();
  console.log(values);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input0' value='0' />
<input id='input1' value='1' />
<input id='input2' value='2' />
<input id='input3' value='3' />
<input id='input4' value='4' />
<input id='input5' value='5' />





但是如果您可以避免循环并为所有input添加通用类或使用start-with选择器^=会更好:

$("body").on('blur', '[id^='input']', function() {
    var values = $(this).val();
    console.log(values);
});




$('body').on('blur', '.input', function () {
  var values = $(this).val();
  console.log(values);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='input' id='input0' value='0' />
<input class='input' id='input1' value='1' />
<input class='input' id='input2' value='2' />
<input class='input' id='input3' value='3' />
<input class='input' id='input4' value='4' />
<input class='input' id='input5' value='5' />

07-24 09:44
查看更多