1

jQueryのkeyup関数を使用して、入力htmlフォーム要素から値を取得し、その値を他の場所のdivに表示する必要があります。

動作するコードは次のようになります。

$('#name').keyup(function() {
    var name = $(this).val();
    $('#name-in-document').html(name);
});

上記のコードブロックの同一のインスタンスが多数あるので、forループを使用して値の配列をループしたいと思います。キャッチは2行目の変数の名前です

var name = $(this).val();

アレイから来ます。

次のループを試しましたが、（私が理解しているように）Javascript変数に配列値を指定できないため、機能しません。

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

    $("#"+inputsArray[i]).keyup(function() {

    var inputsArray[i] = $(this).val();
    $("#"+inputsArray[i]+"-in-document").html(inputsArray[i]);

    })

};

だから私は2つの質問があります：

  1. 配列値を使用してforループで変数を作成できないというのは本当ですか？
  2. 動作する可能性のある同じこと（配列から変数名を取得する）を実行する別の方法はありますか？

私はJavaScriptを始めたばかりで、洞察に感謝しています。ありがとうございました！

4

7 に答える 7

3

1.それは真実ではありません
2.キーワードが DOMNode ウィッチをトリガーするイベントバインドを参照するイベント バインド内の変数iまたは値に対してクロージャーを作成する必要があります。inputArray[i]this

JavaScriptクロージャーはどのように機能しますか?

var inputsArray = ["phone", "name", "address"],
    i = 0,
    len = inputsArray.length;

for ( ; i < len; i ++ ) {
    makeKeyupBind(inputsArray[i]);
} 

function makeKeyupBind( value ) {
    $("#" + value).on("keyup", function() {
        $("#" + value + "-in-document").html( this.value );
    });
}
于 2012-11-22T15:57:51.180 に答える
1

その変数は、イベントのコールバックとして渡された関数のスコープ内にのみ存在するkeyupため、動的な名前を付ける必要は実際にはありません。あなたはそれを絶対に何でも呼び出すことができ、競合に遭遇することはありません.

于 2012-11-22T15:57:14.353 に答える
0

別のアプローチとして#name、クラス名（および彼の友達）を付けることをお勧めします。

<input class="js-key-up" id="name" />

次に、配列とforループを完全に廃止できます。また、新しいHTML要素を追加する場合、配列に項目を追加する必要はありません。

HTML

<input class="js-key-up" id="phone">
<input class="js-key-up" id="name">
<input class="js-key-up" id="address">

<p id="phone-in-document"></p>
<p id="name-in-document"></p>
<p id="address-in-document"></p>

JavaScript </ p> 

$('.js-key-up').keyup(function (e) {
    var id = $(this).attr('id');
    $('#' + id + '-in-document').html($(this).val());
});​

のコードを使用してjsfiddleを作成しました。

于 2012-11-22T16:08:27.223 に答える
0

@Wes Cossick: ループ内のこの行は間違っています:

var valuesArray[i] = $(this).val();

そのようにしたい場合は、ループの前に配列を宣言してください。それはOPの問題

@diana: 配列内のすべての項目に動的なキーアップ ハンドラーを追加しますか? それがその方法である場合、そのコードはそれを行う必要があります（配列内の項目を再割り当てしないでください！）秘訣はクロージャーを作成することです（コードはテストされていません）。

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

  (function(item) {
    $("#"+item).keyup(function() {
      $("#"+item+"-in-document").html($(this).val());
    });
  })(inputsArray[i]);

};

jQuery を使用している場合 (そのようです ;-)、jQuery の each-function を見てください: http://api.jquery.com/jQuery.each/

それはあなたにとってずっと簡単なはずです;-)

于 2012-11-22T16:20:32.673 に答える
0

これを試して：

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

    $("#"+inputsArray[i]).keyup(function() {

    var valuesArray[i] = $(this).val();
    $("#"+inputsArray[i]+"-in-document").html(valuesArray[i]);

    })
于 2012-11-22T15:56:15.457 に答える
0 
 var inputsArray = ["phone", "name", "address"]; 
 for (var i = 0; i < inputsArray.length; i++) {
   $("#"+inputsArray[i]).keyup(function() {

   var htmlValue = $(this).val();
   $("#"+inputsArray[i]+"-in-document").html(htmlValue);
})

配列から変数に名前を付ける必要はないと思いますよね？

于 2012-11-22T15:57:17.280 に答える