質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2287閲覧

input textとtextareaにボタンを押下してテキストを挿入、変更したい。

nyamo

総合スコア21

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/05/20 13:37

編集2016/05/21 05:14

aタグで作成したボタンを押下して、input textとtextareaに同時、または個別にテキストを入れようとjQueryで作成しているのですが、テキストは挿入されるが名前と内容の両方に入ってしまい悩んでいます。

ラジオボタンにdata-を入れて、名前と内容をif文にしています。
最初に内容ボタンを押下すると内容のみに入りますが、名前と内容ボタンを押下するとその後も内容ボタンを押下しても名前と内容に入ってしまいます。
どうも最初にボタンを押下して取得したデータを保持している?みたいです。

もしわかる方がいらっしゃいましたらお教え頂けると幸いです。
よろしくお願い致します。

//jQuery $(".hoge").on("click", function() { //名前と内容 if ($(this).data("text") == 'name,body') { $("a").on("click", function() { $(".hoge1 input[data-text='name']").val($(this).find(".name").text()); $(".hoge1 input[data-text='body']").val($(this).find(".body").text()); }); //内容 } else if ($(this).data("text") == 'body') { $("a").on("click", function() { $(".hoge1 input[data-text='body']").val($(this).find(".body").text()); }); } }); //ラジオボタン <div class="hoge"> <span class="radio" data-text="name,body">名前</span> <span class="radio" data-text="body">内容</span> </div> //名前・内容ボタン <a href="javascript:void(0)"> <span class="name">名前</span> <span class="body">内容</span> </a> <a href="javascript:void(0)"> <span class="body">内容</span> </a> //input textarea <div> <label>名前</label> <div class="hoge1"> <input type="text" data-text="name"> </div> </div> <div> <label>内容</label> <div class="hoge1"> <textarea rows="4" data-text="body"></textarea> </div> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

javascript

1$(".hoge").on("click", function() { 2 if ($(this).data("text") == 'name,body') {

の箇所ですが.hogeに対してclickイベントを設定しているので$(this)とは<div class="hoge">のことになるので$(this).data("text")は常に「undefined」になってしまいます。

ですのでこのソース場合$(".radio").on("click", function() {とすればきちんと値がとれると思います。

値を取得する際はちょっとしたミスで想定した値がとれないことがよくあるのでconsole.logalertを使って確認することをおすすめします。


回答追加します。

コードの動作に関してですが
<span class="radio" data-text="name,body">名前</span>をクリックした際にname,body両方設定するclickイベントが設定されますよね。
その後に<span class="radio" data-text="body">内容</span>をクリックした時にclickイベントが上書きされるのではなく追加されるためname,bodyで設定したイベントも動作してしまいます。

htmlのコードを変更しない前提でjavascriptのみ変更してみました。

javascript

1$(function() { 2 var type=''; 3 $(".radio").on("click", function() { 4 type = $(this).data("text"); 5 }); 6 7 $("a").on("click", function() { 8 if(type == 'name,body'){ 9 $(".hoge1 input[data-text='name']").val($(this).find(".name").text()); 10 $(".hoge1 textarea[data-text='body']").val($(this).find(".body").text()); 11 } else{ 12 $(".hoge1 input[data-text='body']").val($(this).find(".body").text()); 13 } 14 }); 15});

$(".hoge")がclickされた際に取得した値をtypeに入れ、$("a")がclickされた際にtypeの値で動作を振り分けるという形になります。
それと$(".hoge1 input[data-text='body']")ではtextareaに挿入されませんので$(".hoge1 textarea[data-text='body']")に変更しています。

投稿2016/05/20 13:56

編集2016/05/20 15:12
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nyamo

2016/05/20 14:50 編集

ご回答ありがとうございます。 $(".radio")で値は取れるのですが、if文のどこかに問題があるのか、 $("a").on("click", function() { $(".hoge1 input[data-text='name']").val($(this).find(".name").text()); $(".hoge1 input[data-text='body']").val($(this).find(".body").text()); }); を押した後に $("a").on("click", function() { $(".hoge1 input[data-text='body']").val($(this).find(".body").text()); }); を押すと、内容のみではなく名前の値まで変わってしまうのです。 alert単独で if ($(this).data("text") == 'name,body') { alert('名前と内容'); } else if ($(this).data("text") == 'body') { alert('内容'); }; とすると名前のラジオボタンでalert('名前と内容');、内容のラジオボタンボタンでalert('内容');が表示されるので、分岐はできているようなのですが、その後、名前・内容ボタンと内容ボタンを押してテキストを読んでくるとうまく動かず困っています。
退会済みユーザー

退会済みユーザー

2016/05/20 15:10

すみません、コード読んだだけで動作確認していませんでした。 回答追加しましたのでそちらを参考にしてみてください。
nyamo

2016/05/20 16:01

納得いたしました。上書きではなくclickイベントに追加されていたんですね。 おかげさまで解決いたしました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問