次のステップに進む

はじめに

このプロジェクトでは、jQueryを使って進捗バー付きの段階的なフォームを実装する方法を学びます。このプロジェクトは、ユーザーが簡単に異なるステップをナビゲートできるダイナミックでインタラクティブなフォームを作成するプロセスを理解するのに役立ちます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• フォームの次のステップに切り替える「次のページ」ボタンの機能を実装する方法。
• フォームの前のステップに切り替える「前へ」ボタンの機能を実装する方法。
• 成功メッセージを表示する「送信」ボタンの機能を実装する方法。
• フォームの現在のステップを反映するように進捗バーを更新する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• jQueryを使ってDOMを操作し、ユーザーインタラクションを処理する。
• display プロパティを使ってフォームフィールドの表示を制御する。
• フォームの現在のステップを反映するように進捗バーを更新する。
• クリーンで直感的なユーザーインターフェイスを備えた段階的なフォームを作成する。

Skills Graph

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

その中で：

• css/style.css はスタイルファイルです。
• js/index.js は段階的なフォームの切り替えを実装するためのJavaScriptファイルです。
• js/jquery-3.6.0.min.js はjQueryファイルです。
• index.html はメインページです。

WebIDEの右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新してページを表示します。

次のページボタンを実装する

このステップでは、フォームの最初のステップにある「次へ」ボタンの機能をどのように実装するかを学びます。

1. js/index.js ファイルを開きます。
2. $(".next").click のコードを探して、以下のコードを追加します。

// 次のページのボタンをクリックする
$(".next").click(function () {
  current_form = $(this).parent();
  next_form = current_form.next();
  // 次のフォームを表示し、他のフォームを非表示にする
  next_form.show().siblings("fieldset").hide();
  const index = next_form.index() - 1;
  $("#progressbar li").eq(index).addClass("active");
});

3. このコードは「次のページ」ボタンのクリックイベントを処理するためのものです。それが何をするか分解してみましょう。

   • $(".next").click(function () {... })：クラス名が "next" の要素に対するクリックイベントハンドラを設定します。
   • current_form = $(this).parent();：クリックされた「次のページ」ボタンを含む現在のフォームフィールドを取得します。
   • next_form = current_form.next();：「次のページ」ボタンをクリックした後に表示されるはずの次のフォームフィールドを取得します。
   • next_form.show().siblings("fieldset").hide();：次のフォームフィールドを表示し、他のすべてのフォームフィールド（次のフォームフィールドの兄弟要素）を非表示にします。
   • const index = next_form.index() - 1;：次のフォームフィールドのインデックスを計算します。これは進捗バーを更新するために使用されます。
   • $("#progressbar li").eq(index).addClass("active");：対応する進捗バーの項目に "active" クラスを追加します。これはユーザーが次のステップに移動したことを示します。

前のボタンを実装する

このステップでは、フォームの2番目のステップにある「前へ」ボタンの機能をどのように実装するかを学びます。

1. js/index.js ファイルの中で、$(".previous").click のコードを探して、以下のコードを追加します。

// 戻るボタンをクリックする
$(".previous").click(function () {
  current_form = $(this).parent();
  previous_form = current_form.prev();
  previous_form.show().siblings("fieldset").hide();
  const index = previous_form.index() - 1;
  $("#progressbar li")
    .eq(index)
    .addClass("active")
    .next()
    .removeClass("active");
});

2. このコードは「前へ」ボタンのクリックイベントを処理するためのものです。それが何をするか分解してみましょう。
   • $(".previous").click(function () {... })：クラス名が "previous" の要素に対するクリックイベントハンドラを設定します。
   • current_form = $(this).parent();：クリックされた「前へ」ボタンを含む現在のフォームフィールドを取得します。
   • previous_form = current_form.prev();：「前へ」ボタンをクリックした後に表示されるはずの前のフォームフィールドを取得します。
   • previous_form.show().siblings("fieldset").hide();：前のフォームフィールドを表示し、他のすべてのフォームフィールド（前のフォームフィールドの兄弟要素）を非表示にします。
   • const index = previous_form.index() - 1;：前のフォームフィールドのインデックスを計算します。これは進捗バーを更新するために使用されます。
   • $("#progressbar li").eq(index).addClass("active").next().removeClass("active");：対応する進捗バーの項目に "active" クラスを追加します。これはユーザーが前のステップに移動したことを示し、次の進捗バーの項目から "active" クラスを削除します。

送信ボタンを実装する

このステップでは、フォームの3番目のステップにある「送信」ボタンの機能をどのように実装するかを学びます。

1. js/index.js ファイルの中で、$(".submit").click のコードを探して、以下のコードを追加します。

// 送信ボタンをクリックする
$(".submit").click(function () {
  alert("正常に送信されました！");
});

2. このコードは「送信」ボタンのクリックイベントを処理するためのものです。それが何をするか分解してみましょう。
   • $(".submit").click(function () {... })：クラス名が "submit" の要素に対するクリックイベントハンドラを設定します。
   • alert("正常に送信されました！");：フォームが正常に送信されたことを示すアラートメッセージをユーザーに表示します。

これらの4つのステップを完了すると、段階的なフォームの機能が完全に実装されるはずです。「次へ」、「前へ」、「送信」ボタンをクリックしてフォームをテストし、フォームの切り替えと進捗バーの更新が期待通りに機能していることを確認してください。最終的なページの表示は以下の通りです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabExでさらに多くの実験を行って練習してください。