既に一つ表示されている要素を2つにしたい場合に、
ボタンをクリックで要素を増やす、ということをやろうとしています。
HTMLとjQuery
HTML
1<div class="cloneArea"> 2 <div class="hogeInfo"> 3 <input type="number" class="hoge" name="hoge_1" id="hoge_1">番 4 <input type="number" class="hoge" name="hoge_1_r" id="hoge_1_r">回 5 <input type="number" class="hoge" name="hoge_1_b" id="hoge_1_b">周 6 </div> 7</div> 8<button id="btn>+</button>
このようにHTMLを組んでいます。
インプットが3つ並んでいる状態です。この3つで1セットで、+ボタンを押すと、
.hogeInfoが複製するという感じです。
JavaScript
1$(function(){ 2 $("#btn").on('click', function(){ 3 $(".hogeInfo").clone().appendTo(".cloneArea"); 4 }); 5});
このコードで複製は出来るのですが、name属性とid属性の値が同じになってしまいます。。。
複製と同時にname属性とid属性は連番で表示していきたいです。
ボタンを1回押した時のHTMLの出力が下記のようになるのが理想です。
HTML
1<div class="cloneArea"> 2 <div class="hogeInfo"> 3 <input type="number" class="hoge" name="hoge_1" id="hoge_1">番 4 <input type="number" class="hoge" name="hoge_1_r" id="hoge_1_r">回 5 <input type="number" class="hoge" name="hoge_1_b" id="hoge_1_b">周 6 </div> 7 <div class="hogeInfo"> 8 <input type="number" class="hoge" name="hoge_2" id="hoge_2">番 9 <input type="number" class="hoge" name="hoge_2_r" id="hoge_2_r">回 10 <input type="number" class="hoge" name="hoge_2_b" id="hoge_2_b">周 11 </div> 12</div>
idやname属性の値の数値のみ変わっています。
2回押した場合はhoge_3_bなどが出てくるイメージです。
可変変数などを使用して組むのでしょうか?
ご教授頂けますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/29 04:38
2015/10/29 12:48
退会済みユーザー
2015/10/30 07:00