私がこの権利を説明しているかどうかはわかりませんが、ここにあります...
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を使用して同じことを行う方が良いでしょうか?
問題は、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);
});
});
グローバルスコープで変数を宣言するだけです。
var PClevel = '';
$(document).ready(function() {
$('#confirmLevel').click(function() {
PClevel = $("#selectLevel option:selected").text();
$('#t1').append('Level ' + PClevel);
});
});
JQueryを使用しているかどうかに関係なく、javascriptスコープを読む価値があります。
http://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/
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を更新