Jquery值整数与id通过循环

Jquery value integer with id through loop

本文关键字：循环 id 整数 Jquery      更新时间：2023-09-26

我有一个简单的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()循环，jQuery为你做的一切:

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

使用此模式，您可以呈现所需的所有输入，并且jQuery将遍历所有输入，而无需为不存在的元素创建侦听器。

如果你真的要使用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 s添加通用类或使用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' />

blur事件将在将来某个时候发生，届时您将从特定输入模糊。

此时，i的值将被改变，因为循环已经完成执行，i的值是最近的。

您需要创建一个闭包并将此i绑定到blur事件

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

JSFIDDLE

相关文章：