在 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

只需在全局范围内声明变量即可。

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 2

问题是 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 3

将 PClevel 定义为全局变量 var PClevel; 并在 select 更改时更新变量，以便您可以跨不同的函数访问它。

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

在 JQuery 中定义全局变量

Define global variable in JQuery

javascript

jquery

global-variables

jquery-events