web-dev-qa-db-fra.com

Variable javascript globale dans le document.ready

Quelle est la bonne façon de déclarer une variable javascript globale? La façon dont j'essaye, ne fonctionne pas

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

Si vous déclarez une variable globale, vous souhaiterez peut-être utiliser un espace de noms d'une certaine sorte. Déclarez simplement l'espace de noms à l'extérieur, puis vous pouvez y ajouter ce que vous voulez. Comme ça...

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

    MyProject.intro = "something";
});

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

déclarer cela

var intro;

en dehors de $(document).ready() car, $(document).ready() masquera votre variable de la portée globale.

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

Selon le commentaire de @Zakaria

Autrement:

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

Remarque

console.log(intro);

en dehors de la fonction DOM ready (vous en avez actuellement) enregistrera undefined, mais dans DOM ready, cela vous donnera true/false.

Votre console.log Exécuter extérieur avant DOM prêt à exécuter, parce que DOM prêt exécuter après que toutes les ressources sont apparues à DOM c'est-à-dire après que DOM est préparé, donc je pense que vous obtiendrez toujours un résultat absurde.

Selon le commentaire de @ W0rldart

Je dois l'utiliser en dehors de la fonction DOM ready

Vous pouvez utiliser l'approche suivante:

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

Après avoir changé la valeur de intro, j'ai appelé une fonction qui se déclenche avec une nouvelle valeur de intro.

31
thecodeparadox

JavaScript a la portée de la variable au niveau de la fonction , ce qui signifie que vous devrez déclarer votre variable en dehors de la fonction $(document).ready().

Ou bien pour que votre variable ait une portée globale , n'utilisez simplement pas le mot-clé var avant comme indiqué ci-dessous. Cependant, en général, cela est considéré comme une mauvaise pratique car cela pollue la portée mondiale mais c'est à vous de décider.

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

Pour en savoir plus, consultez:

15
Sarfraz

Utilisez window.intro À l'intérieur de $(document).ready().

7
xdazz

comme ceci: mettez intro en dehors de votre document prêt, bonne discussion ici: http://forum.jquery.com/topic/how-do-i-declare-a-global-variable-in -jquery @thecodeparadox est incroyablement rapide: P de toute façon!

 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

Contrairement à d'autres langages de programmation, toute variable déclarée en dehors de toute fonction devient automatiquement globale,

<script>

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

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

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

</script>

Votre problème est que vous déclarez une variable à l'intérieur de la fonction ready(), ce qui signifie qu'elle devient visible (dans la portée) UNIQUEMENT à l'intérieur de la fonction ready(), mais pas à l'extérieur,

Solution: il suffit donc de le rendre global, c'est-à-dire de déclarer celui-ci en dehors de $(document).ready(function(){});

2
Yang

Vous pouvez définir la variable à l'intérieur de la fonction prête pour le document sans var pour en faire une variable globale. En javascript, toute variable déclarée sans var devient automatiquement une variable globale

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

bien que vous ne puissiez pas utiliser la variable immédiatement, mais elle serait accessible à d'autres fonctions

2
Joshua

Utilisation window.intro = "value"; à l'intérieur de la fonction prête. "value" pourrait être void 0 si vous voulez que ce soit undefined

1
Esailija