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>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
$(".hoge").on("click", function() {
if ($(this).data("text") == 'name,body') {
の箇所ですが.hogeに対してclickイベントを設定しているので$(this)とは<div class="hoge">のことになるので$(this).data("text")は常に「undefined」になってしまいます。
ですのでこのソース場合$(".radio").on("click", function() {とすればきちんと値がとれると思います。
値を取得する際はちょっとしたミスで想定した値がとれないことがよくあるのでconsole.logやalertを使って確認することをおすすめします。
回答追加します。
コードの動作に関してですが
<span class="radio" data-text="name,body">名前</span>をクリックした際にname,body両方設定するclickイベントが設定されますよね。
その後に<span class="radio" data-text="body">内容</span>をクリックした時にclickイベントが上書きされるのではなく追加されるためname,bodyで設定したイベントも動作してしまいます。
htmlのコードを変更しない前提でjavascriptのみ変更してみました。
$(function() {
var type='';
$(".radio").on("click", function() {
type = $(this).data("text");
});
$("a").on("click", function() {
if(type == 'name,body'){
$(".hoge1 input[data-text='name']").val($(this).find(".name").text());
$(".hoge1 textarea[data-text='body']").val($(this).find(".body").text());
} else{
$(".hoge1 input[data-text='body']").val($(this).find(".body").text());
}
});
});$(".hoge")がclickされた際に取得した値をtypeに入れ、$("a")がclickされた際にtypeの値で動作を振り分けるという形になります。
それと$(".hoge1 input[data-text='body']")ではtextareaに挿入されませんので$(".hoge1 textarea[data-text='body']")に変更しています。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/20 23:33 編集
$(".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/21 00:10
回答追加しましたのでそちらを参考にしてみてください。
2016/05/21 01:01
おかげさまで解決いたしました。ありがとうございました。