1

私は JavaScript と jquery の両方に不慣れで、小さな問題があります。最新バージョンの Chrome と Firefox の両方で発生しているため、ブラウザの問題ではないと思います。

関連するコードはこちらです (これは、HTML ページのスクリプト タグ内の自己呼び出し関数です)。

(function () {
    "use strict";
    var submitbutton = $('#submitcommand'),
        textinput = $('#textinput'),
        userinput = textinput.val();

    submitbutton.on('click', function() {
        alert("textinput is " + textinput.val());   // => works
        alert("userinput is " + userinput);     // => undefined

    });
}());

「textinput.val()」を使用すると、alert() の最初の呼び出しは正常に機能します。「userinput」が「undefined」と評価されるため、alert() の 2 回目の呼び出しでは、表示されるテキストは返されません。

Firebug コンソールに移動して、4 つのステートメント (2 つの割り当てと alert() への 2 つの呼び出し) を次々に貼り付けてみました。それはうまくいき、私が期待する結果が得られます。

問題は、on('click') 関数内の 'userinput' 変数について何が変わるかということです。ここには何が表示されていませんか?

前もって感謝します！

4

4 に答える 4

1

関数は自己呼び出しであるため、変数はページの読み込み時に設定されます。ボタンがクリックされるたびに再評価されるわけではありません。ページの読み込み中に、おそらく次のことがわかります。

  1. 入力は空です
  2. 入力はスクリプトよりもページの下にあります（おそらく私は思う）

したがって、設定時には値はありません。変数のスコープをボタンクリックに設定することをお勧めします。

(function () {
    "use strict";
    var submitbutton = $('#submitcommand'),
        textinput = $('#textinput')

    submitbutton.on('click', function() {
        var userinput = textinput.val();

        alert("textinput is " + textinput.val());   // => works
        alert("userinput is " + userinput);     // => undefined

    });
}());

また、スクリプトブロックがページの下部にあることを確認する必要があります。そうすると、関数が呼び出されたときにすべてのUI要素がブラウザーに読み込まれます。

于 2012-12-12T13:09:53.183 に答える
1

あなたの値はハンドラ内で定義されていません。

おそらく次のように使用する必要があります。

(function() {
    "use strict";
    var submitbutton = $('#submitcommand'),
        textinput = $('#textinput')
        userinput = textinput.val();
    submitbutton.on('click', function() {
        userinput = textinput.val();// sets the value in the handler
        alert("textinput is " + textinput.val()); 
        alert("userinput is " + userinput); 
    });
}());

作業例: http://jsfiddle.net/avCay/

これは、変数のスコープと、イベント ハンドラー内の値の「リセット」により、このように機能することに注意してください。最初のパスでスクリプトが解析され、2 番目のパスでスクリプトが実行され、submitbutton 要素のクリック イベントで後続のイベント ハンドラーが起動され、そのイベント中のその時点で値が設定されます。

編集: 注: jQuery の読み取り/読み込みラップに関して (私の例のフィドルのように)、それをしたくない場合は、次のことができます: $('#submitcommand').on('click', function() { 変数の代わりに、jQuery はイベント ハンドラーを要素に適切にフックします。

EDIT2：または、おそらくこれはここでより多くの洞察を提供します. もしあなたがそうするなら：

ただし、Javascript の解析/実行サイクルが原因で、初期実行時の「未定義」状態ではなく、入力の「現在の」値が必要な場合は、変数に再度アクセスする必要があります。 .val(); の「再アクセス」。vs 最初のスクリプト実行中の値は、その「未定義」値の鍵です。ハンドラーの「内部」に設定すると、現在の値が取得されます。

于 2012-12-12T13:18:29.180 に答える
0

いつ

var userinput = textinput.val()

評価されます：

  1. textinputまだ存在していない可能性があります-document.ready()ハンドラー内にあるか、<script>ブロックが#textinputDOM内にある必要があります。
  2. 存在する場合は、現在のuserinput値を取得しますが、将来の値は取得しません。
于 2012-12-12T13:07:58.270 に答える
0

これは、ページの読み込み時にの値#textinputが空であるためです（ページの読み込み時に値を何かに設定しない限り）。したがって、に格納されている値userinputは空です。textinputイベントハンドラー内から値を読み取ると、入力フィールドの値が検索されます。

意味がありますか？:)

于 2012-12-12T13:09:27.617 に答える