我有一个简单的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' />