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()循环，jQuery为您完成所有操作：

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

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

Answer 2

如果你真的要使用for循环尝试分离逻辑，你必须使用事件委托.on()并在事件中使用jQuery对象$(this)，因为这个对象包含当前输入blured：

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' />

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为循环

3 个答案: