修改函数中的javascript变量

Question

我已经阅读了全局声明变量，然后能够在函数中修改它们，但事情对我来说并不奏效。

这是我的代码：

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

Answer 1

这是因为只有在从select元素触发change事件时才会执行change()处理程序。 您正在顺序执行中使用console.log()语句，该语句将在触发更改处理程序之前执行

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

如果你想selectee到有选择的价值select元素，那么你可以这样做

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

一旦处理器连接到dom就好，就可以手动触发选择更改处理程序

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

Answer 2

解决此问题的方法是从更改处理程序中执行需要选择者值的代码。 您不应该首先将它存储在全局变量中。

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

});

为了解释，当select的值实际改变时，仅执行.change()回调函数。 它将在稍后的某个时间召唤。 因此，要在稍后的某个时间使用选择者的值，您需要在更改新值的同时执行需要该值的代码。

Answer 3

你的代码并不像你想象的那样有效。 只有在您的选择控件的更改事件被触发后，选择selectee才会反映新值。 事件处理程序内的代码在调用/触发/触发之前不会执行。 但是那些外部的，比如你的console.log(selectee)将在第一次加载代码时执行（在你的情况下，还没有调用更改事件）。

Answer 4

这是因为change处理程序是一个回调函数，它会在事件发生后触发，而不是执行代码顺序

Answer 5

另一种方法是将所选值传递给新函数，从而在该函数内访问它（不是全局的）。 尝试这个：

 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
mynewfunc(selectee);

});
function mynewfunc(){
alert(selectee);
}

注意：触发更改后，无法在新函数mynewfunc外部访问变量selectee器。

演示