質問編集履歴

3 修正依頼によるコードの追加

SteveLight

SteveLight score 10

2018/07/05 09:46  投稿

js フォームを3ステップにした場合の戻り方
```cssここに言語を入力
html, body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Open Sans', sans-serif;
 background-color: #3498db;
}
h1, h2, h3, h4, h5 ,h6{
 font-weight: 200;
}
a{
 text-decoration: none;
}
p, li, a{
 font-size: 14px;
}
fieldset{
 margin: 0;
 padding: 0;
 border: none;
}
.left-b a{
 position: absolute;
left: 20px;
top:12px;
 font-size: 18px;
 color: white;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
   display:block;
 width: 100%;
 padding-bottom: 30px;
}
.col:first-of-type {
 margin-left: 0;
}
.container{
 width: 100%;
 max-width: 700px;
 margin: 0 auto;
 position: relative;
}
.row{
 padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
   content: " ";
   display: table;
}
.cf:after {
   clear: both;
}
.cf {
   *zoom: 1;
}
.wrapper{
 width: 100%;
 margin: 30px 0;
}
/* STEPS */
.steps{
 list-style-type: none;
 margin: 0;
 padding: 0;
 background-color: #fff;
 text-align: center;
}
.steps li{
 display: inline-block;
 margin: 20px;
 color: #ccc;
 padding-bottom: 5px;
}
.steps li.is-active{
 border-bottom: 1px solid #3498db;
 color: #3498db;
}
/* FORM */
.form-wrapper .section{
 padding: 0px 20px 180px 20px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background-color: #fff;
 opacity: 0;
 -webkit-transform: scale(1, 0);
 -ms-transform: scale(1, 0);
 -o-transform: scale(1, 0);
 transform: scale(1, 0);
 -webkit-transform-origin: top center;
 -moz-transform-origin: top center;
 -ms-transform-origin: top center;
 -o-transform-origin: top center;
 transform-origin: top center;
 -webkit-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 text-align: center;
 position: absolute;
 width: 100%;
 min-height: 300px
}
.form-wrapper .section h3{
 margin-bottom: 30px;
}
.form-wrapper .section.is-active{
 opacity: 1;
 -webkit-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
 transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
 background-color: #3498db;
 display: inline-block;
 padding: 10px 40px;
 color: #fff;
 cursor: pointer;
 font-size: 14px !important;
 font-family: 'Open Sans', sans-serif !important;
 position: absolute;
 right: 20px;
 bottom: 20px;
}
.form-wrapper .submit{
 border: none;
 outline: none;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"]{
 display: block;
 padding: 10px;
 margin: 30px auto;
 background-color: #f1f1f1;
 border: none;
 width: 70%;
 outline: none;
 font-size: 14px !important;
 font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
 display: none;
}
.form-wrapper input[type="radio"] + label{
 display: block;
 border: 1px solid #ccc;
 width: 100%;
 max-width: 100%;
 padding: 10px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 cursor: pointer;
 position: relative;
}
.form-wrapper input[type="radio"] + label:before{
 content: "✔";
 position: absolute;
 right: -10px;
 top: -10px;
 width: 30px;
 height: 30px;
 line-height: 30px;
 border-radius: 100%;
 background-color: #3498db;
 color: #fff;
 display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
 display: block;
}
.form-wrapper input[type="radio"] + label h4{
 margin: 15px;
 color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
 border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
 color: #3498db;
}
.is-active input{
 padding-bottom: 10px;
}
.post-form{
 display: none;
}
.post-form p{
 padding-bottom: 1px;
}
.post p{
 font-size: 12px;
 padding-top: 15px;
 width: 80%;
}
.post-form-block{
 display: block;
}
.post-namber{
 width:40%;
 font-size: 18px;
 height: 30px;
}
.uther-address{
 width:80%;
 font-size: 18px;
 height: 30px;
}
.post:last-child span{
 color: red;
 font-size: 26px;
}
.post:first-child{
margin-bottom: 25px;
}
.post:last-child p{
padding-top:20px;
font-size: 16px;
}
.city-list{
display: none;
}
```
```
```jsここに言語を入力
$(function(){
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
     currentSection.removeClass("is-active").next().addClass("is-active");
     headerSection.removeClass("is-active").next().addClass("is-active");
    $(".form-wrapper").submit(function(e) {
      e.preventDefault();
     });
   if(currentSectionIndex === 3){
      $(document).find(".form-wrapper .section").first().addClass("is-active");
     $(document).find(".steps li").first().addClass("is-active");
     }
});
 });
       $('.label-first').click(function(){
         $('.city-list-block').removeClass('city-list');
         $('.post-form').removeClass("post-form-block");
       });
       $('.label-second').click(function(){
       $('.city-list-block').addClass('city-list');
         $('.post-form').addClass('post-form-block');
       });
 });
```
```htmlここに言語を入力
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>フォーム</title>
   <link rel="stylesheet" href="aaa.css">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
 </head>
 <body>
<div class='left-b' id="backing">
<a href='#' class="backto">戻る</a>
</div>
  <div class="container">
   <div class="wrapper">
     <ul class="steps">
       <li class="is-active">Step 1</li>
       <li>Step 2</li>
       <li>Step 3</li>
     </ul>
     <form class="form-wrapper">
       <fieldset class="section is-active" name="sec">
         <h3>あ</h3>
         <div class="row cf">
           <div class="four col">
             <input type="radio" name="r1" id="r1" checked>
             <label for="r1" class="label-first">
               <h4>い</h4>
             </label>
           </div>
           <div class="four col">
             <input type="radio" name="r1" id="r2">
             <label for="r2" class="label-second">
               <h4>う</h4>
             </label>
           </div>
         </div>
         <div class="button">Next</div>
       </fieldset>
       <fieldset class="section" name="sec">
         <h3>個人情報</h3>
         <input type="text" name="name" id="name" placeholder="名前">
         <input type="text" name="email" id="name1" placeholder="ふりがな">
           <input type="text" name="email" id="mumber" placeholder="電話番号">
             <input type="text" name="email" id="email" placeholder="メールアドレス">
             <!-- ▼郵便番号入力フィールド(7桁) -->
           <div class="post-form">
             <div class="post mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
               <input class="mdl-textfield__input " name="zip11" type="text" placeholder="〒郵便番号で自動入力..." maxlength="7" pattern="^[0-9-]+$" id="sample4" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" >
           </div>
           <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
           <div class="post">
           <input class="uther-address mdl-textfield__input " type="text" name="addr11" placeholder="住所欄">
           </div>
           </div>
         <div class="button">Next</div>
       </fieldset>
       <fieldset class="section" name="sec">
         <h3>え</h3>
         <input type="password" name="password" id="password" placeholder="Password">
         <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
         <div class="city-list-block">
        <!-- <form class=action="" method="post">-->
            <p>お</p>
            <select name="country" class="country">
              <option value="no_select" disabled style='display:none;' selected="selected" class="msg">都道府県</option>
              <option value="Japan" class="japan">北海道</option>
              <option value="America" class="America">青森県</option>
              <option value="Australia" class="Australia">岩手県</option>
               
            </select>
        </div>
         <input class="submit button" type="submit" value="送信">
       </fieldset>
       <fieldset class="section">
         <h3>依頼完了!</h3>
         <p>ご利用いただきありがとうございます。</p>
       
         <div class="button">終了</div>
       </fieldset>
     </form>
   </div>
 </div>
 <script src="aaa.js"></script>
</body>
</html>
```
  • JavaScript

    24361 questions

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

  • CSS

    9459 questions

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

  • HTML5

    6235 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2 修正依頼によるコードの追加

SteveLight

SteveLight score 10

2018/07/05 09:41  投稿

js フォームを3ステップにした場合の戻り方
```ここに言語を入力
コード
$(function(){
 $(document).ready(function(){
 $(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
     currentSection.removeClass("is-active").next().addClass("is-active");
     headerSection.removeClass("is-active").next().addClass("is-active");
    $(".form-wrapper").submit(function(e) {
      e.preventDefault();
     });
   if(currentSectionIndex === 3){
      $(document).find(".form-wrapper .section").first().addClass("is-active");
     $(document).find(".steps li").first().addClass("is-active");
     }
   });
``
```
```ここに言語を入力
<!DOCTYPE html>
<html>
<head>
</head>
<div>
<a hlef="#" class="back">戻る</a>
</div>
<body>
  <div class="container">
   <div class="wrapper">
     <ul class="steps">
       <li class="is-active">Step 1</li>
       <li>Step 2</li>
       <li>Step 3</li>
     </ul>
     <form class="form-wrapper">
       <fieldset class="section is-active">
    // 処理
 <div class="button">Next</div>
      </fieldset>
      <fieldset class="section">
     //処理
 <div class="button">Next</div>
      </fieldset>
      <fieldset class="section">
     // 処理
 <div class="button">Next</div>
      </fieldset>
   
   </form>
   </div>
 </div>
</body>
</html>
```
実装したい機能はフォームの戻るボタンで一つ前のフォームに戻ることです。
htmlで三つのsectionがありますが、これは入力フォームが3ステップになっているということです。
またsectionとli要素は非表示状態ですが一番最初の要素にはis-activeが付加されており、cssからdisplay:blck;で表示されるようになっています。
 
nextボタンをクリックするとjsの処理により次の要素のliとsectionにis-activeが付加されます。liでステップ数の明示、sectionで新たな入力フォームへと切り替わります。
しかし戻る機能が使えません。
2ステップ目から1ステップへ戻りたくても戻せない現状です。
is-activeがsection(またはli)要素の何番目にあり、かつjs参照のコードのようにそれから、現在の要素からis-activeをリムーブし、一つ前の要素にis-activeを追加したいのです。
currentSectionとheaderSectionをグローバル変数にして、  currentSection.removeClass("is-active").prev().addClass("is-active");
headerSection.removeClass("is-active").prev().addClass("is-active");
のようにしましたが一切反応がありませんでした。
知識が乏しいですがどうかお力を貸していただければと思います。
宜しくお願い致します。
```jsここに言語を入力
$(function(){
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
     currentSection.removeClass("is-active").next().addClass("is-active");
     headerSection.removeClass("is-active").next().addClass("is-active");
    $(".form-wrapper").submit(function(e) {
      e.preventDefault();
     });
   if(currentSectionIndex === 3){
      $(document).find(".form-wrapper .section").first().addClass("is-active");
     $(document).find(".steps li").first().addClass("is-active");
     }
});
 });
       $('.label-first').click(function(){
         $('.city-list-block').removeClass('city-list');
         $('.post-form').removeClass("post-form-block");
       });
       $('.label-second').click(function(){
       $('.city-list-block').addClass('city-list');
         $('.post-form').addClass('post-form-block');
       });
 });
```
```htmlここに言語を入力
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>フォーム</title>
   <link rel="stylesheet" href="aaa.css">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
 </head>
 <body>
<div class='left-b' id="backing">
<a href='#' class="backto">戻る</a>
</div>
  <div class="container">
   <div class="wrapper">
     <ul class="steps">
       <li class="is-active">Step 1</li>
       <li>Step 2</li>
       <li>Step 3</li>
     </ul>
     <form class="form-wrapper">
       <fieldset class="section is-active" name="sec">
         <h3>あ</h3>
         <div class="row cf">
           <div class="four col">
             <input type="radio" name="r1" id="r1" checked>
             <label for="r1" class="label-first">
               <h4>い</h4>
             </label>
           </div>
           <div class="four col">
             <input type="radio" name="r1" id="r2">
             <label for="r2" class="label-second">
               <h4>う</h4>
             </label>
           </div>
         </div>
         <div class="button">Next</div>
       </fieldset>
       <fieldset class="section" name="sec">
         <h3>個人情報</h3>
         <input type="text" name="name" id="name" placeholder="名前">
         <input type="text" name="email" id="name1" placeholder="ふりがな">
           <input type="text" name="email" id="mumber" placeholder="電話番号">
             <input type="text" name="email" id="email" placeholder="メールアドレス">
             <!-- ▼郵便番号入力フィールド(7桁) -->
           <div class="post-form">
             <div class="post mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
               <input class="mdl-textfield__input " name="zip11" type="text" placeholder="〒郵便番号で自動入力..." maxlength="7" pattern="^[0-9-]+$" id="sample4" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" >
           </div>
           <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
           <div class="post">
           <input class="uther-address mdl-textfield__input " type="text" name="addr11" placeholder="住所欄">
           </div>
           </div>
         <div class="button">Next</div>
       </fieldset>
       <fieldset class="section" name="sec">
         <h3>え</h3>
         <input type="password" name="password" id="password" placeholder="Password">
         <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
         <div class="city-list-block">
        <!-- <form class=action="" method="post">-->
            <p>お</p>
            <select name="country" class="country">
              <option value="no_select" disabled style='display:none;' selected="selected" class="msg">都道府県</option>
              <option value="Japan" class="japan">北海道</option>
              <option value="America" class="America">青森県</option>
              <option value="Australia" class="Australia">岩手県</option>
               
            </select>
        </div>
         <input class="submit button" type="submit" value="送信">
       </fieldset>
       <fieldset class="section">
         <h3>依頼完了!</h3>
         <p>ご利用いただきありがとうございます。</p>
       
         <div class="button">終了</div>
       </fieldset>
     </form>
   </div>
 </div>
 <script src="aaa.js"></script>
</body>
</html>
```cssここに言語を入力
html, body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Open Sans', sans-serif;
 background-color: #3498db;
}
h1, h2, h3, h4, h5 ,h6{
 font-weight: 200;
}
a{
 text-decoration: none;
}
p, li, a{
 font-size: 14px;
}
fieldset{
 margin: 0;
 padding: 0;
 border: none;
}
.left-b a{
 position: absolute;
left: 20px;
top:12px;
 font-size: 18px;
 color: white;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
   display:block;
 width: 100%;
 padding-bottom: 30px;
}
.col:first-of-type {
 margin-left: 0;
}
.container{
 width: 100%;
 max-width: 700px;
 margin: 0 auto;
 position: relative;
}
.row{
 padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
   content: " ";
   display: table;
}
.cf:after {
   clear: both;
}
.cf {
   *zoom: 1;
}
.wrapper{
 width: 100%;
 margin: 30px 0;
}
/* STEPS */
.steps{
 list-style-type: none;
 margin: 0;
 padding: 0;
 background-color: #fff;
 text-align: center;
}
.steps li{
 display: inline-block;
 margin: 20px;
 color: #ccc;
 padding-bottom: 5px;
}
.steps li.is-active{
 border-bottom: 1px solid #3498db;
 color: #3498db;
}
/* FORM */
.form-wrapper .section{
 padding: 0px 20px 180px 20px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background-color: #fff;
 opacity: 0;
 -webkit-transform: scale(1, 0);
 -ms-transform: scale(1, 0);
 -o-transform: scale(1, 0);
 transform: scale(1, 0);
 -webkit-transform-origin: top center;
 -moz-transform-origin: top center;
 -ms-transform-origin: top center;
 -o-transform-origin: top center;
 transform-origin: top center;
 -webkit-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 text-align: center;
 position: absolute;
 width: 100%;
 min-height: 300px
}
.form-wrapper .section h3{
 margin-bottom: 30px;
}
.form-wrapper .section.is-active{
 opacity: 1;
 -webkit-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
 transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
 background-color: #3498db;
 display: inline-block;
 padding: 10px 40px;
 color: #fff;
 cursor: pointer;
 font-size: 14px !important;
 font-family: 'Open Sans', sans-serif !important;
 position: absolute;
 right: 20px;
 bottom: 20px;
}
.form-wrapper .submit{
 border: none;
 outline: none;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"]{
 display: block;
 padding: 10px;
 margin: 30px auto;
 background-color: #f1f1f1;
 border: none;
 width: 70%;
 outline: none;
 font-size: 14px !important;
 font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
 display: none;
}
.form-wrapper input[type="radio"] + label{
 display: block;
 border: 1px solid #ccc;
 width: 100%;
 max-width: 100%;
 padding: 10px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 cursor: pointer;
 position: relative;
}
.form-wrapper input[type="radio"] + label:before{
 content: "✔";
 position: absolute;
 right: -10px;
 top: -10px;
 width: 30px;
 height: 30px;
 line-height: 30px;
 border-radius: 100%;
 background-color: #3498db;
 color: #fff;
 display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
 display: block;
}
.form-wrapper input[type="radio"] + label h4{
 margin: 15px;
 color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
 border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
 color: #3498db;
}
.is-active input{
 padding-bottom: 10px;
}
.post-form{
 display: none;
}
.post-form p{
 padding-bottom: 1px;
}
.post p{
 font-size: 12px;
 padding-top: 15px;
 width: 80%;
}
.post-form-block{
 display: block;
}
.post-namber{
 width:40%;
 font-size: 18px;
 height: 30px;
}
.uther-address{
 width:80%;
 font-size: 18px;
 height: 30px;
}
.post:last-child span{
 color: red;
 font-size: 26px;
}
.post:first-child{
margin-bottom: 25px;
}
.post:last-child p{
padding-top:20px;
font-size: 16px;
}
.city-list{
display: none;
}
```
  • JavaScript

    24361 questions

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

  • CSS

    9459 questions

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

  • HTML5

    6235 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1 コードの追加

SteveLight

SteveLight score 10

2018/07/05 09:39  投稿

js フォームを3ステップにした場合の戻り方
```ここに言語を入力
コード
$(function(){
 $(document).ready(function(){
 $(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
     currentSection.removeClass("is-active").next().addClass("is-active");
     headerSection.removeClass("is-active").next().addClass("is-active");
    $(".form-wrapper").submit(function(e) {
      e.preventDefault();
     });
   if(currentSectionIndex === 3){
      $(document).find(".form-wrapper .section").first().addClass("is-active");
     $(document).find(".steps li").first().addClass("is-active");
     }
   });
``
```
```ここに言語を入力
<!DOCTYPE html>
<html>
<head>
</head>
<div>
<a hlef="#" class="back">戻る</a>
</div>
<body>
  <div class="container">
   <div class="wrapper">
     <ul class="steps">
       <li class="is-active">Step 1</li>
       <li>Step 2</li>
       <li>Step 3</li>
     </ul>
     <form class="form-wrapper">
       <fieldset class="section is-active">
    // 処理
 <div class="button">Next</div>
      </fieldset>
      <fieldset class="section">
     //処理
 <div class="button">Next</div>
      </fieldset>
      <fieldset class="section">
     // 処理
 <div class="button">Next</div>
      </fieldset>
   
   </form>
   </div>
 </div>
</body>
</html>
```
実装したい機能はフォームの戻るボタンで一つ前のフォームに戻ることです。
htmlで三つのsectionがありますが、これは入力フォームが3ステップになっているということです。
またsectionとli要素は非表示状態ですが一番最初の要素にはis-activeが付加されており、cssからdisplay:blck;で表示されるようになっています。
 
nextボタンをクリックするとjsの処理により次の要素のliとsectionにis-activeが付加されます。liでステップ数の明示、sectionで新たな入力フォームへと切り替わります。
しかし戻る機能が使えません。
2ステップ目から1ステップへ戻りたくても戻せない現状です。
is-activeがsection(またはli)要素の何番目にあり、かつjs参照のコードのようにそれから、現在の要素からis-activeをリムーブし、一つ前の要素にis-activeを追加したいのです。
currentSectionとheaderSectionをグローバル変数にして、  currentSection.removeClass("is-active").prev().addClass("is-active");
headerSection.removeClass("is-active").prev().addClass("is-active");
のようにしましたが一切反応がありませんでした。
知識が乏しいですがどうかお力を貸していただければと思います。
宜しくお願い致します。
宜しくお願い致します。
```jsここに言語を入力
$(function(){
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
     currentSection.removeClass("is-active").next().addClass("is-active");
     headerSection.removeClass("is-active").next().addClass("is-active");
    $(".form-wrapper").submit(function(e) {
      e.preventDefault();
     });
   if(currentSectionIndex === 3){
      $(document).find(".form-wrapper .section").first().addClass("is-active");
     $(document).find(".steps li").first().addClass("is-active");
     }
});
 });
       $('.label-first').click(function(){
         $('.city-list-block').removeClass('city-list');
         $('.post-form').removeClass("post-form-block");
       });
       $('.label-second').click(function(){
       $('.city-list-block').addClass('city-list');
         $('.post-form').addClass('post-form-block');
       });
 });
```
```htmlここに言語を入力
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>フォーム</title>
   <link rel="stylesheet" href="aaa.css">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
 </head>
 <body>
<div class='left-b' id="backing">
<a href='#' class="backto">戻る</a>
</div>
  <div class="container">
   <div class="wrapper">
     <ul class="steps">
       <li class="is-active">Step 1</li>
       <li>Step 2</li>
       <li>Step 3</li>
     </ul>
     <form class="form-wrapper">
       <fieldset class="section is-active" name="sec">
         <h3>あ</h3>
         <div class="row cf">
           <div class="four col">
             <input type="radio" name="r1" id="r1" checked>
             <label for="r1" class="label-first">
               <h4>い</h4>
             </label>
           </div>
           <div class="four col">
             <input type="radio" name="r1" id="r2">
             <label for="r2" class="label-second">
               <h4>う</h4>
             </label>
           </div>
         </div>
         <div class="button">Next</div>
       </fieldset>
       <fieldset class="section" name="sec">
         <h3>個人情報</h3>
         <input type="text" name="name" id="name" placeholder="名前">
         <input type="text" name="email" id="name1" placeholder="ふりがな">
           <input type="text" name="email" id="mumber" placeholder="電話番号">
             <input type="text" name="email" id="email" placeholder="メールアドレス">
             <!-- ▼郵便番号入力フィールド(7桁) -->
           <div class="post-form">
             <div class="post mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
               <input class="mdl-textfield__input " name="zip11" type="text" placeholder="〒郵便番号で自動入力..." maxlength="7" pattern="^[0-9-]+$" id="sample4" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" >
           </div>
           <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
           <div class="post">
           <input class="uther-address mdl-textfield__input " type="text" name="addr11" placeholder="住所欄">
           </div>
           </div>
         <div class="button">Next</div>
       </fieldset>
       <fieldset class="section" name="sec">
         <h3>え</h3>
         <input type="password" name="password" id="password" placeholder="Password">
         <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
         <div class="city-list-block">
        <!-- <form class=action="" method="post">-->
            <p>お</p>
            <select name="country" class="country">
              <option value="no_select" disabled style='display:none;' selected="selected" class="msg">都道府県</option>
              <option value="Japan" class="japan">北海道</option>
              <option value="America" class="America">青森県</option>
              <option value="Australia" class="Australia">岩手県</option>
               
            </select>
        </div>
         <input class="submit button" type="submit" value="送信">
       </fieldset>
       <fieldset class="section">
         <h3>依頼完了!</h3>
         <p>ご利用いただきありがとうございます。</p>
       
         <div class="button">終了</div>
       </fieldset>
     </form>
   </div>
 </div>
 <script src="aaa.js"></script>
</body>
</html>
```
  • JavaScript

    24361 questions

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

  • CSS

    9459 questions

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

  • HTML5

    6235 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る