Definire variabile globale in JQuery

Question

Non sono sicuro se sto spiegando questo diritto, ma qui va ...

ho una funzione che lavora in JQuery per assegnare il valore discesa selezionato a una variabile e quindi passare la variabile in una parte diversa dell'HTML quando viene cliccato un pulsante di conferma.

Ecco una versione ridotta del 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> 

Ed ecco la JQuery che ho usato.

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

Il problema è che, se ho poi provo a chiamare la variabile PCLevel per altre funzioni, non succede nulla. Cosa mi manca qui? O sarebbe meglio saltare del tutto JQuery e basta usare Javascript per fare la stessa cosa?

Answer 1

Il problema è che è PClevel scope all'interno del gestore click. Non è possibile accedere all'esterno. Affinché il codice all'esterno visualizzi PClevel, dichiararlo all'esterno e richiedere al gestore di clic di modificarlo.

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

Answer 2

Dichiarare semplicemente la variabile nell'ambito globale.

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

Vale la pena di leggere gli ambiti javascript poiché sono pertinenti sia che si stia utilizzando jQuery oppure no.

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

Answer 3

Definire PClevel di Global Variable var PClevel; e aggiornare l'var su selezionare cambio in modo da potervi accedere attraverso diverse funzioni.

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

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

Aggiornato Plnkr con molteplici funzioni