- ベストアンサー
JQueryインプット要素カウント減算について
- JQueryを使用してインプット要素を追加・削除できるアプリケーションの問題点
- インプット要素の数を追加した合計数量を取得し削除するとうまくいかない
- 解決策として、適切なコードを追加する必要がある
- Marshmallows
- お礼率48% (24/49)
- JavaScript
- 回答数3
- ありがとう数10
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
やりたいことがよくわからないのと、他の方のおっしゃるように疑問点やおかしな（？）点がありますが・・・ ◇インプット要素のnameを制御しているおつもりだと想像しますが、ご提示の制御だと同じ名前の要素が複数できる可能性がありますが予定通りでしょうか？ 例えば入力欄が3個ある状態から、中央のものを削除（_2を削除）して1個追加すると、_1、_3、_3の名前になりそう・・・ ◇変数countで入力欄を記憶しているのだと思いますが、DOM要素を数えていまうという方法もあります。（若干の時間ロスですが、いちいち制御する必要がないので簡単かつ確実です） なさりたいことがわからないので、勝手な想像で単純化した例を・・・ （hiddenの要素は確認のため表示にしてあります） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #tbl1 input{ width:320px; } span.add, span.delete{ margin:0 10px; color:blue; cursor:pointer; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> $(function() { var tbl = $("#tbl1"); var row = tbl.find("tr:first-child").clone(true) .append("<td><span class='delete'>Delete</span></td>"); tbl.on("click", "span.add", function(){ tbl.find("tbody").append(row.clone(true)); adjust(); }).on("click", "span.delete", function(){ $(this).parent().parent("tr").remove(); adjust(); }); function adjust(){ var inp = $("#tbl1 input"); inp.each(function(i, e){$(e).attr("name", "emailAddress_" + (i+1));}); $("#cnt").attr("value", inp.length); } }); </script> </head> <body> <div> <h1>メールアドレス登録</h1> <form name="multi" method="put" action=""> <table id="tbl1"> <tbody> <tr> <td><input type="text" name="emailAddress_1"></td> <td><span class="add">Add</span></td> </tr> </tbody> </table> <p>count：<input type="text" id="cnt" name="cnt" value="1"> <p><input type="submit" value="次へ"> </form> </div> </body> </html>
その他の回答 (2)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
ちょっと読み解いていくとおかしいところがたくさん。 $('#row').size()がどの要素だかわからない。id="row"を取得している。 $(this).parents('p')を取得しているが<p>が見当たらない。 変数iの使い方、ロード時にしか値をとってない。(現状$('#row')なんか指定しているから取れてないと思うけど) 開発者ツール使って、変数の動きを見てみたほうがいいよ。
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
どういう仕様だがわからないので「うまくいかない」について 求める結果と現在の状況を補足して。 流し読みだけど $(document).ready(function(){ $(function() { は無駄。 要素につけられるIDは一意にする必要がある。 追加時にid="addScnt"やid="remScnt"で固定したら一意にならない。
お礼
ご指摘ありがとうございます。確認致します。