クリックするたびにSTEPのclass番号を増やしたり減らしたり切り替えができない。

できていること

●「次へ進む」をクリックすると次のフォームへ進む
●「戻って修正する」をクリックすると前のフォームに戻る
●「次へ進む」をクリックで上部のSTEPのclassを番号を「増やして」切り替える

実現したいこと

●「戻って修正する」をクリックでSTEPのクラスを番号を「減らして」切り替える
●「戻って修正する」から「次へ進む」をクリックで上部のSTEPのclassを番号を「増やして」切り替える

現状の問題点

●「戻って修正する」から「次へ進む」をクリックするとclassの番号が無限に増え続ける
●「戻って修正する」でclassの番号を減らせない

ページの切り替えはできたのですが、STEPの番号の切り替えがうまくできません。

html
1<section class="step_area font_e active_1">
2<ul>
3<li>1</li>
4<li>2</li>
5<li>3</li>
6<li>4</li>
7</ul>
8</section>
9
10<div class="form_step_area">
11
12
13<section id="form_contents_01" class="form_area form_on">
14	<div class="bg_white">
15	<p class="test_number">01</p>
16	</div>
17	<div class="btn_area font_m">
18		<div class="btn_next">次へ進む</div>
19	</div>
20</section>
21
22
23<section id="form_contents_02" class="form_area form_off">
24	<div class="bg_white">
25	<p class="test_number">02</p>
26	</div>
27	<div class="btn_area font_m">
28		<div class="btn_next">次へ進む</div>
29        <div class="btn_back">戻って修正する</div>
30	</div>
31</section>
32
33
34<section id="form_contents_03" class="form_area form_off">
35	<div class="bg_white">
36	<p class="test_number">03</p>
37	</div>
38	<div class="btn_area font_m">
39		<div class="btn_next">次へ進む</div>
40		<div class="btn_back">戻って修正する</div>
41	</div>
42</section>
43
44
45<section id="form_contents_04" class="form_area form_off">
46	<div class="bg_white">
47	<p class="test_number">04</p>
48	</div>
49	<div class="btn_area font_m">
50		<div class="btn_next">次へ進む</div>
51		<div class="btn_back">戻って修正する</div>
52	</div>
53</section>
54
55
56</div>
57

javascript
1$(function(){
2
3var number = 1;
4
5//次を表示
6$('.btn_next').click(function(){
7	
8	var farea = $(this).parents('.form_area');
9	
10	//クラスを追加+削除
11	$(farea).addClass('form_off');
12	$(farea).removeClass('form_on');
13	
14	//次を表示させる
15	$(farea).next().addClass('form_on');
16    
17    //STEP
18    var count = number += 1;
19    console.log('クラスを追加　count = ' + count);
20    $('.step_area').addClass('active_' + count);
21    
22    var none = count -= 1;
23    console.log('クラスを削除　none = ' + none);
24    $('.step_area').removeClass('active_' + none);
25    
26});
27
28//戻る
29$('.btn_back').click(function(){
30
31    var farea = $(this).parents('.form_area');
32
33    //クラスを追加+削除
34    $(farea).addClass('form_off');
35    $(farea).removeClass('form_on');
36
37    //次を表示させる
38    $(farea).prev().addClass('form_on');
39    
40});
41
42});

行動規範の内容に同意します

回答1件

.btn_nextをクリックした時には、行っているSTEPの処理が.btn_backの時には行われていません。
下記の二点はその処理がないために発生していると思われます。

「戻って修正する」から「次へ進む」をクリックするとclassの番号が無限に増え続ける
「戻って修正する」でclassの番号を減らせない

次を表示側ではSTEPの処理ができていので、同じような処理(数字は減っていきます)を書くとよいと思います。

JavaScript
1//戻る
2$('.btn_back').click(function(){
3
4    var farea = $(this).parents('.form_area');
5
6    //クラスを追加+削除
7    $(farea).addClass('form_off');
8    $(farea).removeClass('form_on');
9
10    //次を表示させる
11    $(farea).prev().addClass('form_on');
12
13    //STEP の処理を追加
14});