次のステップに進む

jQueryjQueryBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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

👀 プレビュー

段階的なフォームのデモ

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("jQuery")) -.-> jquery/EventHandlingGroup(["Event Handling"]) jquery(("jQuery")) -.-> jquery/DOMManipulationGroup(["DOM Manipulation"]) jquery/EventHandlingGroup -.-> jquery/event_methods("Event Methods") jquery/EventHandlingGroup -.-> jquery/event_effects("Event Effects") jquery/DOMManipulationGroup -.-> jquery/dom_traversal("DOM Traversal") jquery/DOMManipulationGroup -.-> jquery/element_management("Element Creation and Removal") subgraph Lab Skills jquery/event_methods -.-> lab-445660{{"次のステップに進む"}} jquery/event_effects -.-> lab-445660{{"次のステップに進む"}} jquery/dom_traversal -.-> lab-445660{{"次のステップに進む"}} jquery/element_management -.-> lab-445660{{"次のステップに進む"}} end

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

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

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

├── 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");
});
  1. このコードは「次のページ」ボタンのクリックイベントを処理するためのものです。それが何をするか分解してみましょう。

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

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

画像の説明
✨ 解答を確認して練習

まとめ

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