Ich habe gelesen, wie man Variablen global deklariert und sie dann in Funktionen ändern kann, aber für mich funktioniert es nicht.

Hier ist mein Code:

var selectee = "JK";
// get state selected
$('select.form-control.bfh-states').change(function () {
    selectee = $('select option:selected').val();
    // works correctly, but i need to access it outside the function
    console.log(selectee); 
});

// output JK, should change based on a select box on the form
console.log(selectee); 
1
compguy24 25 Nov. 2013 im 06:24

4 Antworten

Beste Antwort

Dies liegt daran, dass der change() -Handler nur ausgeführt wird, wenn das Änderungsereignis vom select-Element ausgelöst wird. Sie verwenden die Anweisung console.log() in einer sequentiellen Ausführung, die ausgeführt wird, bevor der Änderungshandler ausgelöst wird

//this is correct
var selectee = "JK";

//this registers a change handler for the select element
$('select.form-control.bfh-states').change(function () {
    //but this will not execute now!!! it will get executed only when the select elements change event is fired
    selectee = $(this).val();
    console.log(selectee); // works correctly, but i need to access it outside the function
});

//this will get executed as soon as the change handler is registered not after the handler is executed
console.log(selectee);

Wenn Sie möchten, dass selectee den Wert im Element select auswählt, können Sie entweder Folgendes tun

var selectee = $('select.form-control.bfh-states').val() || "JK";

Oder feuern Sie den Select Change Handler manuell ab, sobald der Handler wie folgt an dom ready angehängt ist

var selectee = "JK";

$('select.form-control.bfh-states').change(function () {
    selectee = $(this).val();
    console.log(selectee); // works correctly, but i need to access it outside the function
}).change();
2
Arun P Johny 25 Nov. 2013 im 02:57

Dies liegt daran, dass der change -Handler ein Rückruf ist. Er wird ausgelöst, nachdem die Ereignisse eingetreten sind, und die Codereihenfolge nicht ausgeführt

0
Pazzilivo 25 Nov. 2013 im 02:56

Die Möglichkeit, dieses Problem zu beheben, besteht darin, den Code, der den Wert von selectee benötigt, im Änderungshandler auszuführen. Sie sollten es überhaupt nicht in einer globalen Variablen speichern.

// get state selected
$('select.form-control.bfh-states').change(function () {
    var selectee = $('select option:selected').val();
    console.log(selectee); // works correctly, but i need to access it outside the function

    // call your other code from here and pass it the current value of selectee
    myOtherFunction(selectee);

});

Zur Erklärung wird die Rückruffunktion .change() NUR ausgeführt, wenn sich der Wert der Auswahl tatsächlich ändert. Es wird irgendwann später genannt. Um den Wert von selectee später verwenden zu können, müssen Sie den Code, der diesen Wert benötigt, gleichzeitig mit der Änderung des neuen Werts ausführen.

1
jfriend00 25 Nov. 2013 im 02:56

Ihr Code funktioniert nicht prozedural, wie Sie denken. selectee gibt den neuen Wert erst wieder, nachdem das Änderungsereignis Ihres ausgewählten Steuerelements ausgelöst wurde. Die Codes in den Ereignishandlern werden erst ausgeführt, wenn sie aufgerufen / ausgelöst / ausgelöst werden. Aber diejenigen außerhalb, wie Ihr console.log(selectee), werden beim ersten Laden des Codes ausgeführt (in Ihrem Fall wurde das Änderungsereignis nicht aufgerufen).

0
Chibuzo 25 Nov. 2013 im 02:55