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

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

解決済

2回答

1152閲覧

jqueryのfunctionについて

space_sss

総合スコア81

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クリップ

投稿2017/05/06 16:12

編集2017/05/06 16:13

こちらのプログラムは変更をクリックすると中身を書き換えることができるプログラムになっています。
ですが確定を押すとプログラムは動きませんなぜでしょうか?
回答をお待ちしております。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 6<script type="text/javascript"> 7$(function(){ 8 var type,name,valu,tab,place,edit; 9 $('input[type=button]').click(function(){ 10 edit=$(this).val(); 11 name=this.name.replace(/_bt/g,""); 12 valu=$('[name='+name+']').val(); 13 if(edit==='変更'){ 14 if(name==='name'){ 15 type='text'; 16 place='お名前を入力してください'; 17 tab='1'; 18 }else if(name==='email'){ 19 type='email'; 20 place='メールアドレスを入力してください'; 21 tab='2'; 22 }else if(name==='user_id'){ 23 type='text'; 24 place='半角英数字8~32文字'; 25 tab='3'; 26 }else{ 27 return; 28 } 29 $(this).parent().html('<input class="sns_edit" type="'+type+'" name="'+name+'" value="'+valu+'" tabindex="1" placeholder="'+place+'"><input type="button" name="'+name+'_bt" value="確定">'); 30 }else if(edit==='確定'){ 31 $(this).parent().html(valu+'<input type="hidden" name="name" value="'+valu+'" /><input type="button" name="'+name+'_bt" value="変更">'); 32 }else{ 33 return; 34 } 35 }); 36}); 37</script> 38<title>無題ドキュメント</title> 39</head> 40<body> 41<dl> 42 <dt>お名前</dt> 43 <dd>山田太郎<input type="hidden" name="name" value="山田太郎" /><input type="button" name="name_bt" value="変更"></dd> 44 <dt>メールアドレス</dt> 45 <dd>xx@xx.co.jp<input type="hidden" name="email" value="xx@xx.co.jp" /><input type="button" name="email_bt" value="変更"></dd> 46 <dt>ユーザーID</dt> 47 <dd>xx_xx<input type="hidden" name="user_id" value="xx_xx" /><input type="button" name="user_id_bt" value="変更"></dd> 48</dl> 49</body> 50</html>

こういった事が度々起きて困っています。
知識不足で申し訳ありませんがどうぞ宜しくお願いいたします。

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

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

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

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

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

guest

回答2

0

「確定」が後から作られた要素なので、 $('input[type=button]') の時点では取得できていないため。clickの書き方を変えれば取得できると思います。

JavaScript

1$( 'body' ).on( 'click', 'input[type=button]', function(){ 2 /* 中身 */ 3});

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1

投稿2017/05/06 16:19

kei344

総合スコア69366

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

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

0

ベストアンサー

すでに回答が出ていますので、別案を(Google Chromeで動作確認)

・表示文字列をspanで囲った
・ボタンとinputを差し替える代わりにattrの変更で対処

JSがいくらか見やすくなり処理内容がはっきりするかと

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 6<script type="text/javascript"> 7$(function(){ 8 var type,name,valu,tab,place,edit; 9 $('input[type=button]').click(function(){ 10 edit=$(this).val(); 11 name=this.name.replace(/_bt/g,""); 12 valu=$('[name='+name+']').val(); 13 if(edit==='変更'){ 14 if(name==='name'){ 15 type='text'; 16 place='お名前を入力してください'; 17 tab='1'; 18 }else if(name==='email'){ 19 type='email'; 20 place='メールアドレスを入力してください'; 21 tab='2'; 22 }else if(name==='user_id'){ 23 type='text'; 24 place='半角英数字8~32文字'; 25 tab='3'; 26 }else{ 27 return; 28 } 29 $(this).prev('input').attr('type', type); 30 $(this).val('確定'); 31 }else if(edit==='確定'){ 32 $(this).prev('input').attr('type', 'hidden'); 33 $(this).siblings('span').html($(this).prev('input').val()); 34 $(this).val('変更'); 35 }else{ 36 return; 37 } 38 }); 39}); 40</script> 41<title>無題ドキュメント</title> 42</head> 43<body> 44<dl> 45 <dt>お名前</dt> 46 <dd><span>山田太郎</span><input type="hidden" name="name" value="山田太郎" /><input type="button" name="name_bt" value="変更"></dd> 47 <dt>メールアドレス</dt> 48 <dd><span>xx@xx.co.jp</span><input type="hidden" name="email" value="xx@xx.co.jp" /><input type="button" name="email_bt" value="変更"></dd> 49 <dt>ユーザーID</dt> 50 <dd><span>xx_xx</span><input type="hidden" name="user_id" value="xx_xx" /><input type="button" name="user_id_bt" value="変更"></dd> 51</dl> 52</body> 53</html>

追記:

ちなみに、この手のものはJqueryよりVueやReactの方が向いているかと
あと、質問の件名は具体的に書いた方がいいですよ

投稿2017/05/07 01:55

編集2017/05/07 02:05
takaboo

総合スコア195

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

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

space_sss

2017/05/07 14:07

質問の回答とはまた違いましたがプログラム自体がシンプルになりわかりやすくなりましたのでこちらをベストアンサーとさせていただきます。 画回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問