質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

2606閲覧

【jQuery】yes/noチャートで、「前の質問に戻る」のボタンを設定したいです

yukabyo

総合スコア135

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/06/23 10:00

いつもお世話になります。

jQueryを使った yes/noチャートを作成したいのですが、
こちらのサイトと全く同じような動きを想定しています。

サイトのデモ画面では、「前の質問に戻る」というボタンを、一番最初の質問以外の質問画面に設置したいのですが、書き方がわかりません。
検索してみたのですが、「前のページに戻る」の方法しかわからず、どのようなふうに書けばいいのか、教えていただける方がいたら嬉しいです。

よろしくお願いいたします。

javascript

1jQuery.noConflict(); 2(function($) { 3 $(function(){ 4 $(".btn").on("click", function() { 5 $(this).closest("div").css("display","none"); 6 id = $(this).attr("href"); 7 $(id).addClass("positionFit").show("fast"); 8 }); 9}); 10})(jQuery)

html

1<div class="yesno clearfix"> 2 <div id="q_01" class="positionFit"> 3 <p>【質問①】</p> 4 <ul> 5 <li class="even"><a class="btn" href="#q_02">Yes</a></li> 6 <li class="odd"><a class="btn" href="#q_03">No</a></li> 7 </ul> 8 </div> 9 10 <div id="q_02" style="display: none;"> 11 <p>【質問②-1】</p> 12 <ul> 13 <li class="even"><a class="btn" href="#q_04">Yes</a></li> 14 <li class="odd"><a class="btn" href="#q_05">No</a></li> 15 </ul> 16 </div> 17 18 <div id="q_03" style="display: none;"> 19 <p>【質問②-2】</p> 20 <ul> 21 <li class="even"><a class="btn" href="#q_04">Yes</a></li> 22 <li class="odd"><a class="btn" href="#q_05">No</a></li> 23 </ul> 24 </div> 25 26 <div id="q_04" style="display: none;"> 27 <p>【答えA】</p> 28 <ul> 29 <li class="even"><a class="btn" href="#q_01">最初に戻る</a></li> 30 </ul> 31 </div> 32 33 <div id="q_05" style="display: none;"> 34 <p>【答えB】</p> 35 <ul> 36 <li class="even"><a class="btn" href="#q_01">最初に戻る</a></li> 37 </ul> 38 </div> 39</div>

css

1.yesno { 2 height: 400px; 3 position:relative; 4 background: #fff; 5 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); 6 margin:0 0 40px; 7 clear: both; 8 overflow: hidden; 9} 10 11.yesno ul{ 12 overflow: hidden; 13 padding: 0 0 0 25px; 14} 15 16.yesno ul li { 17 list-style:none; 18 float: left; 19 text-align: center; 20 display: block; 21 color: #FFF; 22 background-color: #066; 23 line-height: 200px; 24 font-size: 120%; 25 width: 320px; 26 margin: 0 20px 0 0; 27} 28.positionFit { 29 position:absolute; 30 left: 0px; 31 top: 70px; 32 width: 710px; 33} 34 35.positionFit p{ 36 background: #eee none repeat scroll 0 0; 37 padding: 10px 25px; 38 margin: 0 25px; 39} 40 41.yesno ul li a { 42 background-color: #3498db; 43 color: #fff; 44 display: block; 45 height: 100%; 46 text-decoration: none; 47 width: 100%; 48 font-size: 28px; 49} 50 51.no-bg{ 52 background: #48cc83!important; 53} 54 55.yesno ul li a:hover { 56 background-color: #298dcf; 57} 58 59.yesno .material-icons{ 60 background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0; 61 border-radius: 50%; 62 font-size: 30px; 63 padding: 10px 10px 8px; 64 vertical-align: middle; 65 margin: 0 10px 0 0; 66}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

idが連番で振られているのが現在のHTMLにおける法則になっています。
そのIDの数値マイナス1が前の項ですよね。
今のIDが取得し自項を非表示、IDの数値をマイナス1してその項を表示とかで良いのでは(まず第1段階)

投稿2020/06/23 12:50

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問