web-dev-qa-db-ja.com

document.ready内のグローバルjavascript変数

グローバル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);
javascriptjqueryglobal-variablesscope
32
Alex

グローバル変数を宣言している場合、何らかの名前空間を使用することができます。名前空間を外部で宣言するだけで、必要なものをスローできます。このような...

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

    MyProject.intro = "something";
});

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

これを宣言する

_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 ready関数の外（現在は）はundefinedをログに記録しますが、DOM ready内ではtrue/falseを返します。

すべてのリソースがDOMに表示された後、つまりDOMが準備された後にDOMが実行されるため、外側の_console.log_はDOMが実行される前に実行されます。

@ W0rldartのコメントによると

DOM ready関数以外で使用する必要があります

次のアプローチを使用できます。

_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の新しい値で起動する関数を呼び出しました。

31
thecodeparadox

JavaScriptにはFunction-Level変数スコープがあるため、$(document).ready()関数の外で変数を宣言する必要があります。

または、変数にglobalスコープを持たせるには、次のようにvarキーワードを使用しないでください。ただし、一般的にこれは、悪い習慣と見なされます。なぜなら、それはpollutesグローバルスコープですが、決定するのはあなた次第だからです。

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

詳細については、以下をご覧ください。

15
Sarfraz

$(document).ready()内でwindow.introを使用します。

7
xdazz

このように：introをドキュメントの外に用意し、ここで良い議論をしてください： http://forum.jquery.com/topic/how-do-i-declare-a-global-variable-in -jquery @thecodeparadoxはとにかく速い：P

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

他のプログラミング言語とは異なり、関数の外部で宣言された変数は自動的にグローバルになり、

_<script>

//declare global variable
var __foo = '123';

function __test(){
 //__foo is global and visible here
 alert(__foo);
}

//so, it will alert '123'
__test();

</script>
_

問題はready()関数内で変数を宣言することです。つまり、変数はready()関数内でのみ（スコープ内で）表示されますが、外部ではなく、

解決策：それを単にグローバルにする、つまり$(document).ready(function(){});の外部でこれを宣言する

2
Yang

Varを使用せずにドキュメント準備関数内で変数を定義して、グローバル変数にすることができます。 javascriptでは、varなしで宣言された変数は自動的にグローバル変数になります

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

ただし、変数をすぐに使用することはできませんが、他の関数からはアクセスできます

2
Joshua

つかいます window.intro = "value"; ready関数内。 "value" になり得る void 0undefinedにしたい場合

1
Esailija