Jquery 带 id 循环的值整数

Question

我有一个简单的 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 上？

Answer 1

如果你真的必须使用 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 添加通用 class 或使用 start-with 选择器 ^=:[=21 会更好=]

$("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' />

Answer 2

问题似乎是缺少元素。您可以删除 for() 循环，jQuery 为您准备：

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

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

Answer 3

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

Jquery 带 id 循环的值整数

Jquery value integer with id through loop

javascript

jquery

loops

for-loop

blur