現在HTML,JavaScript(jQuery)を使ってアプリ開発をしています。
「こぴー」ボタンを押すと背景1の文字列をすべてコピーし、背景2に追加します。(画像では1つしかコピーコピーされていませんがホントは全部コピーしたいです。)
今回背景1は文字列が5つですが、動的に増えると仮定してください。
この動的に増える文字列を背景2にコピーする方法が知りたいです。
ちなみに現状のコードは以下です。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style> .box{ background: white; border: solid 1px; } .box2{ background: pink; border: solid 2px; } </style> </head> <body> <div style="height:100px; width:500px; background:aqua;" class="backBox1">背景1 <span class="box">みかん</span> <span class="box">ぶどう</span> <span class="box">りんご</span> <span class="box">いちじく</span> <span class="box">さくらんぼ</span> </div> <div style="height:200px; width:200px; background:red; top:200px; position:absolute" class="backBox2">背景2 <ul style="list-style:none;" id="boxList"> <div style="display:none" id="dummyBox"> <li><span class="box2">ダミー</span></li><!-- コピー用ダミー --> </div> </ul> </div> <input type="button" value="こぴー" id="copyBtn"/> </body> <script> $(function(){ $("#copyBtn").click(function(){ //背景1のコピー元のテキストを取得 var word = $('.box:first').text(); //背景2に背景1テキストを追加したボックスを追加 var copyBox = $('#dummyBox').children().clone(); $(copyBox).find('.box2').text(word); $('#boxList').append(copyBox); //本当は背景1の全テキストを取得し、それを背景2ボックスに適用させ、全ボックスを一気に表示したい }); }); </script> </html>
背景1と背景2では文字列ボックスの構造が少し違うので、テキスト部分だけを取得し、背景2の文字列ボックスに追加する方法を探しています。
.each()
とか使ってうまくできないかなとか考えてはいるんですが、いい方法が思いつきません。
もしわかる方がいればよろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/18 22:41 編集
2016/04/19 06:58