definieren globale Variable in JQuery

Question

Ich bin nicht sicher, ob ich dieses Recht habe zu erklären, aber hier geht es ...

Ich habe eine Funktion, die in JQuery funktioniert das ausgewählte Drop-Down-Wert einer Variablen zuweisen und Übergeben Sie die Variable dann an einen anderen Teil des HTML, wenn Sie auf eine Bestätigungsschaltfläche klicken.

Hier ist eine abgespeckte Version des 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> 

Und hier ist die JQuery ich verwendet.

Das Problem ist, wenn ich später versuche, die Variable PCLevel für andere Funktionen aufzurufen, passiert nichts. Was fehlt mir hier? Oder wäre es besser, JQuery ganz zu überspringen und einfach Javascript zu verwenden, um dasselbe zu tun?

Answer 1

Das Problem ist, dass PClevel innerhalb des Click-Handler scoped wird. Es kann nicht außerhalb zugegriffen werden. Um außerhalb des Codes zu sehen PClevel, deklarieren Sie es außerhalb und lassen Sie den Click-Handler nur ändern.

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

Deklarieren Sie einfach die Variable im globalen Gültigkeitsbereich.

Es würde sich lohnen auf Javascript Scopes zu lesen, da sie relevant sind, ob Sie jQuery verwenden oder nicht.

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

Answer 3

definieren PClevel als globale Variable var PClevel; und die var auf ausgewählten Änderung aktualisieren, so dass Sie es auf verschiedene Funktionen zugreifen können.

$(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 Beispiel: https://plnkr.co/edit/4KsLTahhq146ttwEcX8E?p=preview

Aktualisiert Plnkr mit mehreren Funktionen