在 JQuery 中定義全局變量

Question

我不確定我是否正確地解釋了這一點，但在這里......

我有一個在 JQuery 中工作的函數，用於將選定的下拉值分配給一個變量，然后在單擊確認按鈕時將該變量傳遞給 HTML 的不同部分。

這是 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>

這是我使用的 JQuery。

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

問題是，如果我稍后嘗試為其他函數調用 PCLevel 變量，則沒有任何反應。 我在這里缺少什么？ 或者完全跳過 JQuery 並只使用 Javascript 來做同樣的事情會更好嗎？

Answer 1

問題是PClevel的作用域是在點擊處理程序中。 它不能在外面訪問。 為了讓代碼在外面看到PClevel ，在外面聲明它並讓點擊處理程序修改它。

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

只需在全局范圍內聲明變量。

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

閱讀 javascript 范圍是值得的，因為無論您是否使用 jQuery，它們都是相關的。

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

Answer 3

將 PClevel 定義為全局變量var PClevel; 並在選擇更改時更新 var，以便您可以跨不同功能訪問它。

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

更新了具有多種功能的 Plnkr

Answer 4

我們可以使用 window 對象，並將這個 window 對象上的變量設置為：

window.PClevel = 'value'