检索JS变量

Retrieving JS variable

本文关键字：变量 JS 检索      更新时间：2023-09-26
$('#lobSelect').change(function () {
    var selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
    console.log(selectedLob); //prints to the console
});
console.log(selectedLob); //not available here

在上面的代码中，我使用变量selectedLob来存储从下拉菜单中选择的值。

如何从函数外部检索该值?

也说这个函数存储在file1.js中-我如何从另一个文件夹的file2.js访问这个变量?

谢谢

当你声明一个变量时，你使它局部于函数的作用域。

在函数外声明:

var selectedLob;

不要在里面重新声明:

$('#lobSelect').change(function () {
    selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
    console.log(selectedLob); //prints to the console
});

这里仍然没有定义:

console.log(selectedLob); //not available here

，因为在change事件触发之前，它不会被赋值，但在事件发生后，它将在更广泛的范围内被访问。

您可以为您的任务使用全局变量，但是这会导致污染全局命名空间。

最好的做法是使用应用程序命名空间而不是全局命名空间

你file1.js 

// your app namespace
var app = app || {};
// on document ready wrapper
$(function () {
$('#lobSelect').change(function () {
    // initialize your variable at app namespace
    app.selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
});
});
你file2.js 

// use the same app namespace or create it
// if not exist yet (in case when file2.js was loaded before file1.js)
var app = app || {}; 
$(function () {
// app.selectedLob is available here
});

var selectedLob是$('#lobSelect').change(function () {的本地函数，不能在外部访问

<<p> 解决方案/strong> 
var selectedLob =''; //declare variable outside so it accessible 
$('#lobSelect').change(function () {
    //assign value here
    selectedLob = $('#mainWrapper').find('select[name="lob-select"]  option:selected').val();
    console.log(selectedLob); //prints to the console
});
console.log(selectedLob);
 //it doesn't get the value as it runs before the change event fires so you get undefined value

Read什么是JavaScript变量的作用域?

您还可以使用以下方法在函数内部设置全局变量

window["variableName"] = "some value";

然后在任何地方访问它。例如:

console.log(window["variableName"]);

可以使用jQuery。$('#lobSelect')

数据存储功能
$('#lobSelect').data("yourKey", yourVariable)

并像这样检索:

var someVariable = $('#lobSelect').data("yourKey")

或者按照建议在函数外部声明变量，如果您想在之后使用它(数据将存储更长的时间):

var selectedLob;
$('#lobSelect').change(function () {
    selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
    console.log(selectedLob); //prints to the console
});
console.log(selectedLob); 
//accessible here, 
//maybe not elsewhere in your code (depending on your code structure)

你在这里遇到的第一个问题是你在它定义的范围之外使用selectedLob变量，所以你必须将它的声明向上移动一级，这样它就可以在函数之外使用(或者更好的是你应该重构你的代码，所以这种类型变得不必要)。

第二个问题是您在更改事件处理程序中声明selectedLob变量，并期望立即定义它。为了解决这个问题(如果你在这里使用JQuery)，你可以在你声明它之后调用你的change handler函数来初始化你的变量。

所以总结起来像这样:

var selectedLob =''; //declare variable outside change handler so it accessible 
$('#lobSelect').change(function () {
    //assign value here
    selectedLob = $('#mainWrapper').find('select[name="lob-select"]  option:selected').val();
    console.log(selectedLob); //prints to the console
}).change(); // This will call your change event handler and hopefully init selectedLob
// Now selectedLob should be have value of selected option (if your DOM was ready...)
console.log(selectedLob);

最后我想说的是，你应该尽量避免这样的事情，试着重构JS代码让你在DOM准备好后在一个地方初始化所有你需要的东西然后用一些init函数来启动你的应用传递所有它需要的东西。像这样写代码很快就会导致一大堆混乱:)

使用全局变量

 var selectedLob;  // use as a global variable to access outside of the function 
     $('#lobSelect').change(function () {
       selectedLob = $('#mainWrapper').find('select[name="lob-select"] option:selected').val();
       console.log(selectedLob); //prints to the console
     });
if(selectedLob!=undefined){
     console.log(selectedLob); //available here
}
相关文章：