Определить глобальные переменный в 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); 
    }); 
}); 

Это стоило бы читать на яваскрипт прицелов, поскольку они актуальны ли вы используете JQuery или нет.

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

Answer 3

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

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