JQuery Wert integer mit id durch die Schleife

Question

Ich habe eine einfache for-Schleife:

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

Ich möchte die Werte meines #input bekommen, wenn ich etwas in meinem Eingang schreiben bekomme ich nur die Meldung nicht definiert in meinem Konsole.

Aber warum, wenn ich folgendes führe, bekomme ich etwas richtig?

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

Wie lege ich diese Werte auf eine andere ID in dieser Schleife?

Answer 1

Wenn Sie wirklich for Schleife verwenden versuchen, die Logik zu trennen, und Sie müssen Ereignis Delegation .on() und verwenden jQuery-Objekt $(this) innerhalb der Veranstaltung verwenden, da dieses Objekt die aktuelle Eingabe enthalten 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' />

Aber es ist besser, wenn Sie die Schleife vermeiden könnte und allgemeine Klasse hinzufügen, für alle input s oder benutzen start-with Selektor ^=:

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

Das Problem scheint zu sein, dass Elemente fehlen. Sie können die for() Schleife entfernen, macht jQuery alle für Sie:

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

Mit diesem Modus können Sie alle Eingaben machen, die Sie benötigen und jQuery schlingt sich durch alle von ihnen ohne Zuhörer zu schaffen Elemente inexistent.

Answer 3

Das Ereignis blur wird irgendwann in Zukunft auftreten, wenn Sie von diesem bestimmten Eingang verwischen.

Zu diesem Zeitpunkt wird der i Wert geändert, da die Schleife die Ausführung beendet hat i hat letzten Wert.

Sie benötigen einen Verschluss erstellen und binden diese i zum blur Ereignis

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

JSFIDDLE