Определение глобальной переменной в JQuery

Я не уверен, правильно ли я объясняю это ,но вот оно...

у меня есть функция, которая работает в 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, чтобы сделать то же самое?

6
global-variables javascript javascript-events jquery variables

3 ответов

проблема в том, что находится внутри обработчика click. К нему нельзя получить доступ снаружи. Для того, чтобы код снаружи видел 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); 
    });
});
7

просто объявить переменную в глобальной области.

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/

1

определить PClevel как глобальную переменную var PClevel; и обновите var при выборе change, чтобы вы могли получить к нему доступ через разные функции.

$(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 с несколькими функциями

0