it-swarm.com.de

Definieren Sie die globale Variable in JQuery

Ich bin mir nicht sicher, ob ich das richtig erkläre, aber hier geht es ...

Ich habe eine Funktion, die in JQuery funktioniert, um den ausgewählten Dropdown-Wert einer Variablen zuzuweisen und sie dann an einen anderen Teil des HTML-Codes zu übergeben, wenn auf eine Bestätigungsschaltfläche geklickt wird.

Hier ist eine abgespeckte Version des HTML-Codes

<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, die ich benutzt habe.

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

Das Problem ist, wenn ich später versuche, die PCLevel-Variable 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?

7
Alicia

Das Problem ist, dass sich PClevel innerhalb des Click-Handlers befindet. Es ist nicht von außen zugänglich. Damit Code außerhalb von PClevel angezeigt wird, deklarieren Sie ihn außerhalb und lassen Sie ihn vom Click-Handler modifizieren. 

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

Deklarieren Sie einfach die Variable im globalen Gültigkeitsbereich.

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

Es lohnt sich, die Javascript-Bereiche durchzulesen, da sie relevant sind, ob Sie jQuery verwenden oder nicht.

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

1
DGS

Definieren Sie PClevel als globale Variable var PClevel; und aktualisieren Sie die Variable bei Auswahländerungen, sodass Sie über verschiedene Funktionen darauf 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

Plnkr wurde mit mehreren Funktionen aktualisiert

0