投稿2022/09/22 05:21
診断コンテンツの様なものを作りたいと思っています。
参考サイトは下記になります。
製品抽出系コンテンツ
実現したい完成形参考サイトは下記です。
目指している動き
・phpは使わずJavaScriptで完成を希望します。
・JavaScriptはHTML内に記述を希望します。
・cssは外部ファイルで記述します。
・JavaScriptの点数が一番多いものが診断結果に表示され、結果の商品をクリックするとリンク先に行きます。
リンク先で前のページ戻るボタンをクリックすると最後に表示したものを表示するようにしたいです。
●仮に最初のページをA
●次のページをB
として
A（JavaScriptを発火して終わった後<a>クリック）
➡B（前のページに戻るボタンクリックorスマホであればフリックして戻る）
➡A（JavaScriptが発火した所で表示）
↑の様な流れを実現したいです。
・戻るボタンをクリックして、前のページに戻ると
JavaScriptが発火する前に戻ってしまいます。
参考サイトでは戻っていないです。（参考サイトは_blankがついていましたので、検証ツールで、消した後クリックしました。）
<!DOCTYPE html> <html> <head> <title>sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/test_style.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> var selectArray = [-1, -1, -1, -1, -1]; var scoreObj = [ [, "tap", "duo", "t", "l", "s", "e"], ["0_0", 20, 10, 8, 15, 8, 8], ["0_1", 8, 12, 12, 20, 12, 12], ["0_2", 5, 12, 15, 5, 12, 12], ["1_0", 5, 10, 12, 20, 15, 10], ["1_1", 15, 8, 8, 20, 10, 5], ["1_2", 12, 15, 20, 20, 15, 10], ["2_0", 15, 10, 12, 20, 10, 8], ["2_1", 15, 10, 18, 10, 10, 20], ["2_2", 18, 12, 15, 20, 20, 10], ["3_0", 20, 20, 20, 15, 5, 5], ["3_1", 5, 5, 5, 10, 20, 20], ["3_2", 10, 20, 10, 10, 10, 10], ["4_0", 5, 18, 18, 18, 18, 18], ["4_1", 20, 12, 12, 18, 12, 12], ["4_2", 20, 10, 10, 10, 10, 10], ]; productData = scoreObj[0]; productData.shift(); for (let i = 1; i < scoreObj.length; i++) { var itemData = scoreObj[i]; var qID = "q" + itemData.shift(); //プロパティ名の作成 Object[qID] = itemData; //---データの設定 } function quesFunc() { var idArray = this.id.split("_"); var qID = Number(idArray[0]); var ansID = Number(idArray[1]); var selectID = selectArray[qID]; if (ansID == selectID) return; $("#" + qID + "_" + ansID).addClass("selected"); $("#" + qID + "_" + selectID).removeClass("selected"); selectArray[qID] = ansID; if (checkFunc()) { $("#searchButton").addClass("active"); } } function checkFunc() { for (var i in selectArray) { if (selectArray[i] == -1) return false; } return true; } function calcFunc() { var totalArray = [0, 0, 0, 0, 0, 0]; for (var i = 0; i < selectArray.length; i++) { propName = "q" + i + "_" + selectArray[i]; var scoreList = Object[propName]; for (var j = 0; j < totalArray.length; j++) { totalArray[j] += Number(scoreList[j]); } } var resultArray = []; for (var i in productData) { resultArray[i] = [productData[i], totalArray[i]]; } resultArray.sort(function (a, b) { return b[1] - a[1]; }); resultFunc(resultArray); } function resultFunc(resultArray) { for (var i = 1; i <= 3; i++) { var myData = resultArray[i - 1]; $("#no" + i + " .rPhoto").attr( "src", "http://www.jquerystudy.info/sample/product/images/photo_" + myData[0] + ".jpg" ); $("#no" + i + " .rName").attr( "src", "http://www.jquerystudy.info/sample/product/images/nameL_" + myData[0] + ".gif" ); $("#no" + i + " .scoreText").text(myData[1] + "点"); } $("#checker").slideUp(); $("#result").slideDown(); } $(function () { $("#result").hide(); $("ul>li").click(quesFunc); $("#checker").on("click", "#searchButton.active", calcFunc); //---結果画面から質問画面に戻る $("#returnButton").click(function () { $("#checker").slideDown(); $("#result").slideUp(); }); }); </script> </head> <body style="zoom: 1" cz-shortcut-listen="true"> <div id="main"> <div id="checker"> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_1.gif" width="740" height="25" alt="どこに設置して利用しますか？" /> <div class="quesText"> リビングで家族みんなで楽しんだり、寝室で一人で楽しむなど、スタイルに合わせて選択してください。 </div> <ul> <li id="0_0">リビング</li> <li id="0_1">書斎/仕事部屋</li> <li id="0_2">寝室</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_2.gif" width="740" height="25" alt="何に利用しますか？" /> <div class="quesText"> 仕事で利用したり、音楽や映像を楽しんだり用途に応じて選択してください。 </div> <ul> <li id="1_0">仕事</li> <li id="1_1">映像/音楽</li> <li id="1_2">インターネット</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_3.gif" width="740" height="25" alt="重視する特徴は？" /> <div class="quesText"> 大画面や価格の安さ、処理速度など利用目的に必要な製品の特徴を選択して下さい。 </div> <ul> <li id="2_0">画面の大きさ</li> <li id="2_1">価格の安さ</li> <li id="2_2">処理速度</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_4.gif" width="740" height="25" alt="タッチパネルは必要ですか？" /> <div class="quesText"> Windows8の特徴でもあるタッチインターフェイスを利用するにはタッチパネルが必要です。 </div> <ul> <li id="3_0">必要</li> <li id="3_1">どちらでも良い</li> <li id="3_2">必要ない</li> </ul> </div> <div class="ques"> <img src="http://www.jquerystudy.info/sample/product/images/q_5.gif" width="740" height="25" alt="誰と利用しますか？" /> <div class="quesText"> 一人で利用するか、複数で利用するかによって必要な要素が異なります。 </div> <ul> <li id="4_0">ひとり</li> <li id="4_1">家族</li> <li id="4_2">不特定多数</li> </ul> </div> <div id="searchButton"></div> </div> <div id="result"> <div class="productL" id="no1"> <div class="profile"> <img src="http://www.jquerystudy.info/sample/product/images/no1.jpg" width="51" height="65" alt="1位" /><img class="rName" src="http://www.jquerystudy.info/sample/product/images/nameL_tap.gif" width="490" height="42" /> <img src="http://www.jquerystudy.info/sample/product/images/score.gif" width="51" height="17" alt="score" /><img class="rBar" src="http://www.jquerystudy.info/sample/product/images/bar.gif" width="300" height="17" /> <div class="scoreText">170点</div> <div class="resultText"></div> </div> <a href="https://www.sony.jp/vaio/products/VL13/" class="rLink" ><img class="rPhoto" src="http://www.jquerystudy.info/sample/product/images/photo_tap.jpg" width="184" height="129" alt="" /></a> </div> <div id="returnButton"></div> </div> </div> </body> </html>
sessionStorageを使用しました。
下記が教えていただいたコードになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>onunload test</title> <!-- ── スクリプト ── --> <script> window.addEventListener( "DOMContentLoaded", function () { //----] カウント初期化 let count = Number( sessionStorage.getItem( "num" ) ); //----] 関数：50 ミリ秒おきにカウントを +1 function loop() { document.getElementById( "num" ).textContent = count++; sessionStorage.setItem( "num", count ); setTimeout( loop, 50 ); }; //----] カウント開始 loop(); } ); </script> </head> <body cz-shortcut-listen="true"> <div id="num">2145</div> <a href="http://broadtail.jp">link</a> </body> </html>
・どうすれば今作っているものに適用させるかがわからず困っています。
・また、この方法ですとロードすると0に（最初の状態にならない）ならない、良くないです。
・参考サイトではsessionStorageが使われていないからこれが原因ではない？
Visual Studio Codeを使用しています。
説明長くなりました。申し訳ございません。
ご教授いただければ幸いです。
よろしくお願い致します。
回答2件
0
ローカルストレージかcookieを使って対応します。
HTMLというのはステートレスで、ページ移動するとそれまでのことを全て忘れます。
ですので、ブラウザに任意の情報を保存できる上記技術を使って対応する必要があります。
全ての質問文を読んでいませんが、やることは↓
①診断で回答がされるたび、データを回答配列(selectArray?)に代入・更新していく。
②回答配列をjsonなどの文字型に変換し、ローカルストレージに保存する。
↓次の設問に移動したり、前の設問に移動するたびに③
③ローカルストレージから、回答配列を呼び出し、JSコード上の回答配列に代入する。
④回答されれば①と②を行う。
↓結果表示画面でもほぼ同様です
⑤ ③と同様、ローカルストレージから呼び出す。
⑥ 回答配列の中身を利用して、結果を計算・表示する。
例ではsessionStorage.getItem( "num" ) と、番号を毎回呼び出していますね。
これがあなたの場合、回答を保存した配列(selectArray)となるはずです。
投稿2022/09/26 04:16
総合スコア92
0
ベストアンサー
根本的な勘違いをされていると思います。
両参考サイトは、
SPA（Single Page Application）
という仕組みを採用しているため、
そもそもページ遷移をしていません。
（SPAによって、ページ遷移しているように見せかけているだけ）
よって、JavaScriptによる変更を保持できています。
そのため、両サイトにおいても、ページを更新、ないし、ブラウザのブラウザバックボタンを押すと、
リセットされます。
ページ遷移を行う、a要素クリックでのページ遷移では、本件は実装できないため、
SPAについて勉強されるとよいかと思います。
投稿2022/09/22 06:06
総合スコア9555
あなたの回答
tips
プレビュー
Q&A
