現在以下のコードをjQueryを使って実装しています。
「緑のボックスをクリックするとピンクのボックスにその文字が入る」ように作りたいと思っています。
そこでtextメソッドを使ったのですが、そうするとlabelタグの間のspanタグやinputタグが消えてしまいます
。
次にappendメソッドを使ったのですが、文字だけを消す方法がわからず、どんどんピンクのボックスに文字が増えていってしまいます。
labelタグの中のタグを消さずに文字だけを変更する方法が知りたいです。
もしわかる方がいればお願いします。
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style> .aaa { width: 150px; height: 50px; background-color: #EFE; border: solid 1px #CCC; position: absolute; } .ddd { width: 150px; height: 50px; background-color: pink; border: solid 1px pink; position: absolute; } </style> </head> <body> <label class="aaa"> <span class="bbb"></span> <input type="hidden" class="ccc">りんご </label> <br> <br> <br> <label class="aaa"> <span class="bbb"></span> <input type="hidden" class="ccc">いちご </label> <br> <br> <br> <label class="aaa"> <span class="bbb"></span> <input type="hidden" class="ccc">ぶどう </label> <br> <br> <br> <label class="ddd"> <span class="bbb"></span> <input type="hidden" class="ccc">りんご </label> <script> $(function() { $(".aaa").on("click", function() { var txt = $(this).text(); //↓悩んでいるところ↓ //$(".ddd").text(txt); //中のタグが消える //$(".ddd").append(txt); //どんどん文字が増える。消し方がわからない }); }); </script> </body> </html>
まだ回答がついていません
会員登録して回答してみよう