web-dev-qa-db-fra.com

Définir la variable globale dans JQuery

Je ne sais pas si j'explique cela correctement, mais voilà, ça va ...

J'ai une fonction qui fonctionne dans JQuery pour attribuer la valeur de liste déroulante sélectionnée à une variable, puis passer la variable à une autre partie du code HTML lorsqu'un clic est fait sur le bouton de confirmation.

Voici une version simplifiée du HTML

<p id="t1"></p> 
<select id="selectLevel">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
   <option value="13">13</option>
   <option value="14">14</option>
   <option value="15">15</option>
   <option value="16">16</option>
   <option value="17">17</option>
   <option value="18">18</option>
   <option value="19">19</option>
   <option value="20">20</option>
</select>
<span class="btn" id="confirmLevel">Confirm</span>

Et voici le JQuery que j'ai utilisé.

$(document).ready(function() {
    $('#confirmLevel').click(function() {
        var PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

Le problème est que, si j'essaie plus tard d'appeler la variable PCLevel pour d'autres fonctions, rien ne se passe. Qu'est-ce que j'oublie ici? Ou vaudrait-il mieux éviter JQuery complètement et simplement utiliser Javascript pour faire la même chose?

javascriptjqueryvariablesjavascript-eventsglobal-variables
7
Alicia

Le problème est que PClevel est limité dans le gestionnaire de clics. Il n'est pas accessible à l'extérieur. Pour que le code extérieur puisse afficher PClevel, déclarez-le extérieur et demandez au gestionnaire de clic de le modifier. 

$(document).ready(function() {
    var PClevel; // Code inside the ready handler can see it.

    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

// or

var PClevel; // Now it's a global. Everyone can see it.
$(document).ready(function() {
    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});
8
Joseph

Déclarez simplement la variable sur la portée globale.

var PClevel = '';
$(document).ready(function() {
    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

Il serait intéressant de lire sur les portées javascript car elles sont pertinentes, que vous utilisiez jQuery ou non.

http://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

1
DGS

Définissez PClevel en tant que variable globale var PClevel; et mettez à jour la variable var on select afin que vous puissiez y accéder via différentes fonctions.

$(document).ready(function() {
  var PClevel;
  PClevel = $("#selectLevel option:selected").text();
  $('#selectLevel').change(function(){
    PClevel = $("#selectLevel option:selected").text();
  });
  $('#confirmLevel').click(function() {
    $('#t1').append('Level ' + PClevel); 
  });
});

Exemple Plnkr: https://plnkr.co/edit/4KsLTahhq146ttwEcX8E?p=preview

Mise à jour de Plnkr avec plusieurs fonctions

0
Sajan Mullappally