0

私はjQueryを学んでいます。私は忍者ではありません。W3Schoolsで次のチュートリアルを読んだ後、私は何か難しいことを試してみたかったのです。だから私は彼らのサンプルを少し修正してこれを書いた：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
     for(i=1;i<7;i++)              // Getting the values from the input boxes
        {
           var a[i] = $("#test"+i).val();
         }  

   for(i=1;i<7;i++)              //printing the values in the document
        {
           document.write("<p>"+a[i]+"</p>");
         }  
  });
});
</script>
</head>

<body>

<p>Name: <input type="text" id="test1" value="Mickey Mouse"></p><br>
<p>Name: <input type="text" id="test2" value="Mickey "></p><br>
<p>Name: <input type="text" id="test3" value="Mouse"></p><br>
<p>Name: <input type="text" id="test4" value="Micse"></p><br>
<p>Name: <input type="text" id="test5" value="Mice"></p><br>
<p>Name: <input type="text" id="test6" value="use"></p><br>

<button>Show Value</button>
</body>
</html>

ここで、var a[i] = $("#test"+i).val();これは可能です。+IDを識別するために「」記号を使用することを意味します。？

コードが機能していません。HTMLページのフィールドで行われたすべての入力が表示されます。しかし、それは何の反応も示していません。jQueryがサポートしていない間違いはありますか？

4

3 に答える 3

2

aまず、 forループの外側を配列として宣言する必要があります。これにより、コードをそのまま使用できますが、すべてのhtmlが失われます。

$(document).ready(function () {
    $("button").click(function () {
        var a = [];
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            a[i] = $("#test" + i).val();
        }

        for (i = 1; i < 7; i++) //printing the values in the document
        {
            document.write("<p>" + a[i] + "</p>");
        }
    });
});

すべてのhtmlが失われないようにするには、たとえば、出力を含むdivをhtmlに追加します。

    <div id="output"></div>
</body>

次に、document.writeを次のように置き換えます$("#output").append("<p>" + a[i] + "</p>");

$(document).ready(function () {
    $("button").click(function () {
        var a = [];
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            a[i] = $("#test" + i).val();
        }
        $("#output").empty();
        for (i = 1; i < 7; i++) //printing the values in the document
        {
            $("#output").append("<p>" + a[i] + "</p>");
        }
    });
});

ただし、まだ2つのforループがあるので、次のように1つに減らすことができます。

$(document).ready(function () {
    $("button").click(function () {
        $("#output").empty();
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            $("#output").append("<p>" + $("#test" + i).val() + "</p>");
        }
    });
});

それは良いことですが、まだ終わっていません。$（ "＃output"）は比較的コストのかかるメソッド呼び出しです。変数にキャッシュして再利用することで、7回ではなく1回だけ作成するように減らすことができます。

$(document).ready(function () {
    $("button").click(function () {
        var outputDiv = $("#output").empty();
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            outputDiv.append("<p>" + $("#test" + i).val() + "</p>");
        }
    });
});

これでコードは迅速かつ効率的に実行されますが、別の入力を追加した場合は、マジックナンバー（）を1増やす必要があり7ます。代わりに、入力をループするだけではどうでしょうか。

$(document).ready(function () {
    $("button").click(function () {
        var outputDiv = $("#output").empty();
        // $("input[id^=test]") selects all inputs that have an id that starts with "test"
        $("input[id^=test]").each(function(){
            outputDiv.append("<p>" + this.value + "</p>");
        });
    });
});

.appendを各ループの外側に移動することでさらに多くのことができますが、この場合、必要な追加のコードと比較して大きな違いはありません。

于 2013-01-21T19:59:23.553 に答える
2

あなたは書くことができます

  var a = [];
  $("button").click(function(){
       $("[id^=test]").each(function(){a[+this.id.slice(-1)]=this.value});
  });

配列を埋める前に、配列を作成する必要があることに注意してください。iあなたのコードでは、変数を で宣言する方がよいでしょうvar i=...。

ループせずに配列内のすべての値を取得する別の解決策は、次のとおりです。

  $("button").click(function(){
    var a = $("[id^=test]").map(function(){return this.value}).get();
  });

ドキュメントに要素を追加したい場合は、 append を使用します。

  $('<p>'+a[i]+'</p>').appendTo(document.body);

すべてを一度に実行したい場合は、次のように記述できます。

$($("[id^=test]").map(function(i){
      return '<p>value ' + i + '= '+this.value+'</p>'
}).get().join('')).appendTo(document.body);

デモンストレーション

しかし、通常、jQuery で何かを行うには多くの方法があります。

于 2013-01-21T19:39:33.367 に答える
1

各入力の値を含む段落をページに追加するには、これを行うことができます - http://jsfiddle.net/6PQgq/

$("button").click(function(){
    $('input').each(function(){
        $('body').append('<p>'+$(this).val()+'</p>');
    });
});
于 2013-01-21T19:45:57.517 に答える