Q&A
前提・実現したいこと
YES NO で進んでいくような診断テストを作っています。
こちらで同じような質問を見て、参考にさせていただき、推移元が決まっている場合には問題なくできました。
ただ、推移元が複数ある場合、どこから推移してきたのかあらかじめ知ることができないので、困っています。
発生している問題・エラーメッセージ
コードで言うと、「結果」のところで、「戻る」ボタンを押したときに、「質問2」から来たら「質問2」へ戻るようにしたいのです。
どうぞよろしくお願いします。
該当のソースコード
<script> $(function(){ $(".back").on("click",function(){ back_hash = "q_"+$(this).data("back-qnum"); location.href = location.pathname+"#"+back_hash; $(this).closest("div").css("display","none"); $("#"+back_hash).addClass("active").show("fast"); }); $(".btn").on("click", function() { $(this).closest("div").css("display","none"); id = $(this).attr("href"); $(id).addClass("active").show("fast"); }); }); </script> <div class="qbox"> <div id="q_01" class="active"> <p>質問1</p> <ul> <li><a class="btn" href="#q_02">Yes</a></li> <li><a class="btn" href="#q_03">No</a></li> </ul> </div> <div id="q_02" style="display: none;"> <p>質問2</p> <ul> <li><a class="btn" href="#q_04">Yes</a></li> </ul> </div> <div id="q_03" style="display: none;"> <p>質問3</p> <ul> <li><a class="btn" href="#q_04">Yes</a></li> </ul> </div> <div id="q_04" style="display: none;"> <p>結果</p> <input type="button" value="戻るボタン" class="back" data-back-qnum="01"> </div> </div> ### 試したこと 前のhrefを取得して、ハッシュタグ以降の数字の部分のみ取得し、data-back-qnum="" に入れるようにすればいいのかと試したのですが、そもそもページ推移しないhrefを取得する‥ところでもう躓いています。補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
.btnをクリックしたときに、親のidを変数に格納しておいて、それに戻るようにすればどうでしょう。
js
1 $(function () { 2 let back_hash; 3 $(".back").on("click", function () { 4 location.href = location.pathname + "#" + back_hash; 5 $(this).closest("div").css("display", "none"); 6 $("#" + back_hash).addClass("active").show("fast"); 7 }); 8 $(".btn").on("click", function () { 9 $(this).closest("div").css("display", "none"); 10 back_hash = $(this).closest("div").attr('id'); 11 id = $(this).attr("href"); 12 $(id).addClass("active").show("fast"); 13 }); 14 });
追記
[戻るボタン]は一つのみで履歴を遡って最初の質問まで戻ることが可能にするコード例
質問の移動履歴を配列に格納してそれを元に戻ります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>タイトル</title> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 8 <script> 9 $(function () { 10 let hash_history=["#q_01"]; 11 $("#back").on("click", function () { 12 let id = hash_history.pop() 13 $(id).hide(); 14 id = hash_history[hash_history.length - 1]; 15 location.href = location.pathname + id; 16 $(id).addClass("active").show("fast"); 17 if(hash_history.length===1) $("#back").hide(); 18 }); 19 $(".btn").on("click", function () { 20 $(this).closest("div").hide(); 21 if(hash_history.length===1) $("#back").show("fast"); 22 let id = $(this).attr("href"); 23 hash_history.push(id); 24 $(id).addClass("active").show("fast"); 25 }); 26 }); 27 </script> 28</head> 29 30<body> 31 32 <div class="qbox"> 33 <div id="q_01" class="active"> 34 <p>質問1</p> 35 <ul> 36 <li><a class="btn" href="#q_02">Yes</a></li> 37 <li><a class="btn" href="#q_03">No</a></li> 38 </ul> 39 </div> 40 <div id="q_02" style="display: none;"> 41 <p>質問2</p> 42 <ul> 43 <li><a class="btn" href="#q_04">Yes</a></li> 44 </ul> 45 </div> 46 <div id="q_03" style="display: none;"> 47 <p>質問3</p> 48 <ul> 49 <li><a class="btn" href="#q_04">Yes</a></li> 50 </ul> 51 </div> 52 <div id="q_04" style="display: none;"> 53 <p>結果</p> 54 </div> 55 <input type="button" value="戻るボタン" id="back" style="display: none;"> 56 </div>
投稿2020/12/07 02:36
編集2020/12/09 03:13
総合スコア33790
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/07 16:40 編集
2020/12/08 14:50
2020/12/08 15:13
2020/12/08 18:34 編集
2020/12/09 00:46
2020/12/09 03:14
2020/12/09 04:19 編集