Jquery целого значения с идентификатором через петлю

Question

У меня есть простой цикл:

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); 
    }); 
} 

Как поместить эти значения на другой идентификатор в этом цикле?

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 с или использовать 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 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