4

2つの入力フィールドがあり、ボタンをクリックしてjqueryを使用してそれらの値を取得しようとしています。とても簡単な操作のように思えますが、私の一生の間、それを機能させることはできません。コードスニペットは次のとおりです。

Name: <input type="text" id="name" value="test1"><br>
Message: <input type="text" id="line" value="test2"><br>
<button id="submitButton">Submit</button>

<script>
name1 = $("#name").val();
line1 = $("#line").val();

$("#submitButton").click(function(){
    alert("Name: " + name1 + "\nMessage: " + line1);
});

</script>

値を指定しない場合、アラートは両方の変数に対して未定義で返されます。入力の値を変更してボタンをクリックしても、test1とtest2と表示されます。私がここで見逃している単純なものがなければなりません、誰かがそれが何であるか知っていますか？

4

5 に答える 5

11

コードでは、スクリプトの初期化時に値をフェッチし、現在の値をフェッチするのではなく、クリック関数でその時点での値を参照します。

試す：

$("#submitButton").click(function(){
    name1 = $("#name").val();
    line1 = $("#line").val();
    alert("Name: " + name1 + "\nMessage: " + line1);
});
于 2013-03-06T00:20:36.150 に答える
2 
name1 = $("#name").val()

現時点で name1の値を持つ新しい文字列変数を作成します。アクセスしようとするたびに呼び出されることはありません。最も簡単な方法は、代わりに使用することです。$("#name").val().val()name1$("#name").val()

http://jsfiddle.net/wTvku/

于 2013-03-06T00:20:41.213 に答える
2

他の回答で述べたように、問題は、変数を事前に計算していて、それらが魔法のように変化することを期待していることです。ただし、VanillaJSを使用することを強くお勧めします

document.getElementById('submitButton').onclick = function() {
    var name1 = document.getElementById('name').value,
        line1 = document.getElementById('line').value;
    alert("Name: " + name1 + "\nMessage: " + line1);
};
于 2013-03-06T00:22:27.010 に答える
0

コードをdocument.ready（）イベント内にラップする必要があります...

$(document).ready(function() {  
name1 = $("#name").val();
line1 = $("#line").val();

$("#submitButton").click(function(){
    alert("Name: " + name1 + "\nMessage: " + line1);
});

// Handler for .ready() called.
});
于 2013-03-06T00:20:41.663 に答える
0

クリック関数の外部で変数値を設定しました。値は、関数を実行するたびではなく、ページの読み込み時に設定されます。これを試して：

Name: <input type="text" id="name" value="test1"><br>

メッセージ：
送信

$（ "＃submitButton"）。click（function（）{name1 = $（ "＃name"）。val（）; line1 = $（ "＃line"）。val（）; alert（ "Name：" + name1 + "\ nメッセージ：" + line1）;}）;
于 2013-03-06T00:21:20.460 に答える