document.ready中的全局javascript变量

Question

哪种声明全局javascript变量的正确方法？我正在尝试它的方式不起作用

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

Answer 1

如果要声明全局变量,则可能需要使用某种命名空间.只需在外部声明命名空间,然后就可以将任何想要的东西扔进去.像这样...

var MyProject = {};
$(document).ready(function() {
    MyProject.intro = "";

    MyProject.intro = "something";
});

console.log(MyProject.intro); // "something"

Answer 2

宣布这个

var intro;

在因果之外$(document).ready(),$(document).ready()将隐藏您的变量与全局范围.

码

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

据@Zakaria评论

其他方式:

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

在DOM就绪函数之外(目前你已经)会记录undefined,但在DOM准备好之前它会给你真/假.

console.log在DOM就绪执行之前你的外部执行,因为DOM准​​备执行后所有资源都出现在DOM之后,即在DOM准备好之后,所以我认为你总会得到荒谬的结果.

根据@ W0rldart的评论

我需要在DOM就绪函数之外使用它

您可以使用以下方法:

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

更改后,intro我调用了一个函数,该函数将使用新值触发intro.

Answer 3

JavaScript具有函数级变量作用域,这意味着您必须在$(document).ready()函数外声明变量.

或者,为了使您的变量具有全局范围,只需var在之前使用关键字,如下所示.但一般来说,这被认为是不好的做法,因为它污染了全球范围,但由您来决定.

$(document).ready(function() {
   intro = null; // it is in global scope now

要了解有关它的更多信息,请查看:

• 解释JavaScript范围和闭包

Answer 4

window.intro在里面使用$(document).ready().