0

ページ上のテキスト ボックスのペアの値を取得しようとしています。

それらをキャプチャしていますが、重複データを取得しているため、希望どおりに機能していません。

ここに私のHTMLコードがあります:

    <div id="links">
        <div id="group1">
             <input type="text" name="linkTitle" value="Google">
             <input type="text" name="linkURL" value="www.google.com">
        </div>

        <div id="group2">
             <input type="text" name="linkTitle" value="Yahoo">
             <input type="text" name="linkURL" value="www.Yahoo.com">
        </div>

    </div>

    <div>
        <input id="btnSaveLinks" type="button" value="Save">
    </div>

そして、ここにJavaScriptがあります：

    $("#btnSaveLinks").on('click', function() {
       $('#links input[type=text]').each(function () {
          var title = $(this).attr("value");
          var url = $(this).attr("value");
          console.log('title: ' + title);
          console.log('url: ' + url);
       });
    });

タイトル: グーグル

url: グーグル

タイトル: www.google.com

URL: www.google.com

タイトル：ヤフー

url：ヤフー

タイトル: www.yahoo.com

url: www.yahoo.com

4

2 に答える 2

6

すべての入力を反復処理し、同じ値を 2 つの変数に格納しているため、重複したデータを取得しています。

var title = $(this).attr("value");
var url = $(this).attr("value"); // same thing

あなたの変数titleとurl同じものが含まれています。

div を反復処理して、その中の入力を取得できます。

$('#links div').each(function() {
      var title = $(this).find('[name=linkTitle]').val();
      var url = $(this).find('[name=linkURL]').val();
      console.log('title: ' + title);
      console.log('url: ' + url);
});

フィドル: http://jsfiddle.net/zXTEC/

于 2013-10-29T19:31:39.703 に答える
1

この行で各テキスト ボックスに値を 2 回書いているため、重複しています$(this).attr("value");。コードをもう一度見てみると、各ボックスに同じ行を使用して値を取得し、2 つの異なる変数に割り当てていることがわかります...

于 2013-10-29T19:32:23.190 に答える