Which is the right way of declaring a global javascript variable? The way I'm trying it, doesn't work
$(document).ready(function() {
var intro;
if ($('.intro_check').is(':checked')) {
intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
console.log(intro);
If you're declaring a global variable, you might want to use a namespace of some kind. Just declare the namespace outside, then you can throw whatever you want into it. Like this...
var MyProject = {};
$(document).ready(function() {
MyProject.intro = "";
MyProject.intro = "something";
});
console.log(MyProject.intro); // "something"
declare this
var intro;
outside of $(document).ready()
because, $(document).ready()
will hide your variable from global scope.
Code
var intro;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
Another way:
window.intro = undefined;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
window.intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
window.intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
window.intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
console.log(intro);
outside of DOM ready function (currently you've) will log undefined
, but within DOM ready it will give you true/ false.
console.log
execute before DOM ready execute, because DOM ready execute after all resource appeared to DOM ie after DOM is prepared, so I think you'll always get absurd result. I need to use it outside of DOM ready function
You can use following approach:
var intro = undefined;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
intro = true;
introCheck();
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function() {
if (this.checked) {
intro = true;
} else {
intro = false;
}
introCheck();
});
});
function introCheck() {
console.log(intro);
}
After change the value of intro
I called a function that will fire with new value of intro
.
JavaScript has Function-Level variable scope which means you will have to declare your variable outside $(document).ready()
function.
Or alternatively to make your variable to have global scope, simply dont use var
keyword before it like shown below. However generally this is considered bad practice because it pollutes the global scope but it is up to you to decide.
$(document).ready(function() {
intro = null; // it is in global scope now
To learn more about it, check out:
在$(document).ready()
使用window.intro
。
like this: put intro
outside your document ready, Good discussion here: http://forum.jquery.com/topic/how-do-i-declare-a-global-variable-in-jquery @thecodeparadox is awesomely fast :P anyways!
var intro;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
Unlike another programming languages, any variable declared outside any function automatically becomes global,
<script>
//declare global variable
var __foo = '123';
function __test(){
//__foo is global and visible here
alert(__foo);
}
//so, it will alert '123'
__test();
</script>
You problem is that you declare variable inside ready()
function, which means that it becomes visible (in scope) ONLY inside ready()
function, but not outside,
Solution: So just make it global, ie declare this one outside $(document).ready(function(){});
You can define the variable inside the document ready function without var to make it a global variable. In javascript any variable declared without var automatically becomes a global variable
$(document).ready(function() {
intro = "something";
});
although you cant use the variable immediately, but it would be accessible to other functions
Use window.intro = "value";
inside the ready function. "value"
could be void 0
if you want it to be undefined
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.