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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

610閲覧

jsでformの切り替え

MeB

総合スコア104

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/03/02 08:11

編集2018/03/02 08:36

html

1<!-- エリア1 --> 2<div class="form-area active"> 3フォームの内容 4<button>確認画面</button> <!-- このボタンを押すとエリア2が表示される --> 5</div> 6 7<!-- エリア2 --> 8<div class="form-area"> 9確認画面 10<button>もどる</button><!-- このボタンを押すとエリア1が表示される --> 11<button>送信</button><!-- このボタンを押すとエリア3が表示される --> 12</div> 13 14<!-- エリア3 --> 15<div class="form-area"> 16送信完了 17<button>フォーム入力に戻る</button><!-- このボタンを押すとエリア1が表示される --> 18</div>

js

1$('button').click(function(){ 2 $(this).toggleClass('active'); 3});

やりたいことは
最初の画面では1つ目のフォームの内容の.form-areaが表示されていて
buttonを押したら次の確認画面.form-areaを表示、戻るを押したらフォームの内容の.form-areaが表示
送信完了の画面でbuttonをおしたら最初のフォームの内容.form-areaを表示

のようにクラス(active)を追加したり削除したりしたいのですが、上記のjsだと同時に2つform-areaが
出てしまうとおもうのですがよい方法はないでしょうか?jsはほとんど初めて触るため知識がありません。
ご教示よろしくお願いいたします。

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

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

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

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

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

x_x

2018/03/02 08:17

buttonが四つ存在しているので、どれを押したらどうなるかをそれぞれ明記してもらえるでしょうか?
MeB

2018/03/02 08:23

訂正致しました。
guest

回答3

0

.form-areaそれぞれにIDを振り、removeClass/addClassで切り替えるのがいいと思います。
個人的には、入力/確認/送信画面は、ページ分けた方がいいような気がしますが。

html

1<div class="form-area active" id="formEnter"> 2フォームの内容 3<button id="btn-confirm">確認画面</button> 4</div> 5<div class="form-area" id="formConfirm"> 6確認画面 7<button id="btn-return">もどる</button><button id="btn-send">送信</button> 8</div> 9<div class="form-area" id="formEnd"> 10送信完了 11<button id="btn-enter">フォーム入力に戻る</button> 12</div> 13

javascript

1$(function(){ 2 $('#btn-enter, #btn-return').click(function(){ 3 $('#formConfirm, #formEnd').removeClass('active'); 4 $('#formEnter').addClass('active'); 5 }); 6 $('#btn-confirm').click(function(){ 7 $('#formEnter, #formEnd').removeClass('active'); 8 $('#formConfirm').addClass('active'); 9 }); 10 $('#btn-send').click(function(){ 11 $('#formEnter, #formConfirm').removeClass('active'); 12 $('#formEnd').addClass('active'); 13 }); 14});

投稿2018/03/02 08:41

kszk311

総合スコア3404

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

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

0

.toggleClass()だけでは制御できないので、各form-areaにclassかidを振っておいて判別したらどうでしょうか?

HTML

1<div class="form-area area2"> 2 確認画面 3 <button data-next="area1">もどる</button> 4 <button data-next="area3">送信</button> 5</div> 6<!-- 他も同様 -->

JavaScript

1$('button').on('click', function(event) { 2 $('.form-area').hide(); 3 $('.' + $(this).attr('data-next')).show(); 4});

投稿2018/03/02 08:37

編集2018/03/02 08:40
x_x

総合スコア13749

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

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

0

ベストアンサー

CSS

1.form-area{display:none} 2.form-area.active{display:block}

javascript

1$(function(){ 2 $('button').on('click',function(){ 3 switch($(this).text()){ 4 case "確認画面": 5 case "もどる": 6 $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active"); 7 break; 8 case "送信": 9 $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active"); 10 break; 11 case "フォーム入力に戻る": 12 $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active"); 13 break; 14 } 15 }); 16});

HTML

1 2<div class="form-area active"> 3フォームの内容 4<button>確認画面</button> 5</div> 6<div class="form-area"> 7確認画面 8<button>もどる</button> 9<button>送信</button> 10</div> 11<div class="form-area"> 12送信完了 13<button>フォーム入力に戻る</button> 14</div>

投稿2018/03/02 08:56

yambejp

総合スコア114583

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

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

MeB

2018/03/02 09:16

いつも回答ありがとうございます。 <button>のなかが画像の場合も同じようなことができますでしょうか?
yambejp

2018/03/02 09:18

imgをつかった画像であれば$(this).html()などで代替してください もちろんidやbuttonの出現順番(index)で処理するほうが楽だと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問