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

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

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

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

Q&A

解決済

1回答

465閲覧

jsで診断コンテンツのページ内切り替えについて

h2h1h8h6

総合スコア1

JavaScript

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

0グッド

1クリップ

投稿2023/04/14 09:37

編集2023/04/14 10:46

実現したいこと

質問に合った動作をするようにしたいです

前提

とあるサイトを参考に、ソースまでは作ってみたのですが、jsについては難易度が高すぎて先に進めずつまずいております。どなたかご教授いただけませんでしょうか。
jsの知識が乏しいのでどうかよろしくお願いいたします。

希望の動作ができれば嬉しいので、下記の参考ページのjsの書き方が大幅に変更されても構いません。

【内容】
質問数:4段階
Q1の選択数:2⇒1か2選択で「次へ」ボタンが押せるようになりQ2へ

Q2の選択数:3⇒1~3どれか選択で「次へ」ボタンが押せるようになりQ3へ

Q3の選択数:3⇒1~3どれか選択すると、選択項目の下に隠しているコンテンツ(1種類)が表示され「次へ」ボタンが押せるようになりQ4へ

Q4の選択数:4⇒1~4どれか選択すると、選択項目の下に選択に合った内容のコンテンツ(これも最初は隠したいです)が表示され「次へ」ボタンが押せるようになり最後のサンクス表示

参考ページのjsです

$((function() { $('a[href^="#"]').click((function() { var t = $(this).attr("href") , e = ($(".header_inner").height(), $("#" == t || "" == t ? "html" : t).offset().top); return $("body,html").animate({ scrollTop: e }, 400, "swing"), !1 } )) } )), $((function() { var t; "?cnt=all" == location.search && ($(".q-1text").show(), $("#q2").show(), $(".q2-02").show(), $(".q2_text").show(), $(".q2-toggle-box").show(), $("#q3").show(), $(".q3-toggle-box").show(), $(".q3-content").show(), $("#result").show(), $(".result_text").show()); var e = 1; $(".form input").change((function() { 2 == e ? function(t) { var e = ""; switch (t) { case "q2-1": e = ".q2_text01"; break; case "q2-2": e = ".q2_text02"; break; case "q2-3": e = ".q2_text03" } if ($(".q2-toggle-box").hasClass("toggle-active")) { $(".q2-toggle-box").hide(), $elem = $(".q2_text"), $elem.each((function() { var t = $(this); t.hasClass("q2text-active") && (t.removeClass("q2text-active"), t.hide()) } )), $(e).show(), $(e).addClass("q2text-active"); setTimeout((function() { $(e).show(), $(".q2-toggle-box").slideToggle() } ), 200) } else $(".q2-toggle-box").slideToggle(), $(".q2-toggle-box").addClass("toggle-active"), $(e).show(), $(e).addClass("q2text-active") }($(t).val()) : form_name = "#q-" + e.toString() + " input:checked"; var a = $(form_name).val(); 3 == e && function(t) { var e = ""; switch (t) { case "q3-1": e = ".q3-toggle_01"; break; case "q3-2": e = ".q3-toggle_02"; break; case "q3-3": e = ".q3-toggle_03"; break; case "q3-4": e = ".q3-toggle_04" } if ($(".q3-toggle-box").hasClass("toggle-active")) { $(".q3-toggle-box").hide(), $elem = $(".q3-content"), $elem.each((function() { var t = $(this); t.hasClass("q3-content-active") && (t.removeClass("q3-content-active"), t.hide()) } )); setTimeout((function() { $(e).show(), $(e).addClass("q3-content-active"), $(".q3-toggle-box").slideToggle() } ), 200) } else $(".q3-toggle-box").slideToggle(), $(".q3-toggle-box").addClass("toggle-active"), $(e).show(), $(e).addClass("q3-content-active") }(a); var s = $(form_name).length , o = "_off" , i = "#btn-q" + e.toString() + " img" , c = "#btn-q" + e.toString(); return $btn = $(i), 0 == s ? ($btn.attr("src", $btn.attr("src").replace("_on", o)), $(c).removeClass("active")) : ($btn.attr("src", $btn.attr("src").replace(o, "_on")), $(c).addClass("active")), !1 } )), $(".q-btn").click((function() { if ($(this).hasClass("active")) { var a, s = "#q" + e.toString(); a = 2 == e ? t : "#q-" + e.toString() + " input:checked"; var o = $(a).val(); 1 == e && function(e) { var a = "" , s = ""; switch (e) { case "q1-1": t = "#q-2_1 input:checked", s = ".q2-01", a = ".result_01"; break; case "q1-2": t = "#q-2_2 input:checked", s = ".q2-02", a = ".result_02", $(".q2-02").show(); break; case "q1-3": t = "#q-2_3 input:checked", s = ".q2-03", a = ".result_03" } $(s).show(), $(a).show() }(o); var i = e + 1 , c = "#q" + i.toString(); 4 == i && (c = "#result"), $(s).fadeOut(100, (function() { $(s).hide(), e++ } )); setTimeout((function() { $(c).fadeIn(200); var t = $("#header").offset().top; $("html, body").animate({ scrollTop: t }, 500, "swing") } ), 200) } } )), $(".casestudy_btn").click((function() { $(this).next("div").slideToggle(500), $(this).toggleClass("open") } )).next().hide(), $(".tabs li").click((function() { $(".tabs li").removeClass("active"), $(this).addClass("active"); let t = $(this).index(); $(".tab-cont").removeClass("active"), $(".tab-cont").eq(t).addClass("active") } )) } ));

特に困っていること

上記のjsを元に、ところどころ触ってはみましたものの
Q1で「no」を選択するとQ2で選択後「次へ」の動作が効かず、Q3の内容が全て見えてしまったりと、どこをどうしたら良いのかわからなくなってしまいました。
(上記のjsは参考ページのまんまに戻した状態です)

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascript

1<script> 2document.addEventListener('change',({target})=>{ 3 if(target.matches('.q')){ 4 target.closest('fieldset').querySelector('.next').disabled=false; 5 } 6}); 7document.addEventListener('click',({target})=>{ 8 if(target.matches('.next')){ 9 target.closest('fieldset').nextElementSibling.classList.remove('hide'); 10 } 11}); 12</script> 13<style> 14.hide{display:none;} 15</style> 16<fieldset> 17<legend>Q1</legend> 18<label><input type="radio" name="q1" value="1" class="q">1</label> 19<label><input type="radio" name="q1" value="2" class="q">2</label> 20<input type="button" class="next" value="next" disabled> 21</fieldset> 22<fieldset class="hide"> 23<legend>Q2</legend> 24<label><input type="radio" name="q2" value="1" class="q">1</label> 25<label><input type="radio" name="q2" value="2" class="q">2</label> 26<label><input type="radio" name="q2" value="3" class="q">3</label> 27<input type="button" class="next" value="next" disabled> 28</fieldset> 29<fieldset class="hide"> 30<legend>Q3</legend> 31<label><input type="radio" name="q3" value="1" class="q">1</label> 32<label><input type="radio" name="q3" value="2" class="q">2</label> 33<label><input type="radio" name="q3" value="3" class="q">3</label> 34<input type="button" class="next" value="next" disabled> 35</fieldset> 36<fieldset class="hide"> 37<legend>Q4</legend> 38<label><input type="radio" name="q4" value="1" class="q">1</label> 39<label><input type="radio" name="q4" value="2" class="q">2</label> 40<label><input type="radio" name="q4" value="3" class="q">3</label> 41<label><input type="radio" name="q4" value="4" class="q">4</label> 42<input type="button" class="next" value="next" disabled> 43</fieldset> 44<div class="hide">thanks!</div>

調整

Q3とQ4を選んだときに説明を表示

javascript

1<script> 2document.addEventListener('change',({target})=>{ 3 if(target.matches('.q')){ 4 target.closest('fieldset').querySelector('.next').disabled=false; 5 target.closest('fieldset').querySelector('.active')?.classList.remove('active'); 6 if(target.matches('[data-id]')) document.querySelector(target.dataset.id)?.classList.add('active'); 7 } 8}); 9document.addEventListener('click',({target})=>{ 10 if(target.matches('.next')){ 11 target.closest('fieldset').nextElementSibling.classList.remove('hide'); 12 } 13}); 14</script> 15<style> 16.hide:not(.active){display:none;} 17</style> 18<fieldset> 19<legend>Q1</legend> 20<label><input type="radio" name="q1" value="1" class="q">1</label> 21<label><input type="radio" name="q1" value="2" class="q">2</label> 22<input type="button" class="next" value="next" disabled> 23</fieldset> 24<fieldset class="hide"> 25<legend>Q2</legend> 26<label><input type="radio" name="q2" value="1" class="q">1</label> 27<label><input type="radio" name="q2" value="2" class="q">2</label> 28<label><input type="radio" name="q2" value="3" class="q">3</label> 29<input type="button" class="next" value="next" disabled> 30</fieldset> 31<fieldset class="hide"> 32<legend>Q3</legend> 33<label><input type="radio" name="q3" value="1" data-id="#q3-1" class="q">1</label> 34<label><input type="radio" name="q3" value="2" data-id="#q3-2" class="q">2</label> 35<label><input type="radio" name="q3" value="3" data-id="#q3-3" class="q">3</label> 36<input type="button" class="next" value="next" disabled> 37<div id="q3-1" class="hide">1が選ばれました</div> 38<div id="q3-2" class="hide">2が選ばれました</div> 39<div id="q3-3" class="hide">3が選ばれました</div> 40</fieldset> 41<fieldset class="hide"> 42<legend>Q4</legend> 43<label><input type="radio" name="q4" value="1" data-id="#q4-1" class="q">1</label> 44<label><input type="radio" name="q4" value="2" data-id="#q4-2" class="q">2</label> 45<label><input type="radio" name="q4" value="3" data-id="#q4-3" class="q">3</label> 46<label><input type="radio" name="q4" value="4" data-id="#q4-4" class="q">4</label> 47<input type="button" class="next" value="next" disabled> 48<div id="q4-1" class="hide">1が選ばれました</div> 49<div id="q4-2" class="hide">2が選ばれました</div> 50<div id="q4-3" class="hide">3が選ばれました</div> 51<div id="q4-4" class="hide">4が選ばれました</div> 52</fieldset> 53<div class="hide">thanks!</div>

投稿2023/04/14 10:29

編集2023/04/14 10:58
yambejp

総合スコア115280

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

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

h2h1h8h6

2023/04/14 10:42

早速ご回答くださりありがとうございます! この内容で質問項目はスムーズになるかと思います。 あと、恐れ入りますが、内容に書きましたのが伝わりづらく申し訳ございません。Q3とQ4の選択項目クリックで隠している内容を表示したいです。 この部分もよろしくお願い致します。
h2h1h8h6

2023/04/14 11:18

ありがとうございます! 度々で大変恐れ入りますが、Q3までは質問ごとに分岐させたかったのですが、どのようにすればよろしいでしょうか?
h2h1h8h6

2023/04/14 11:29

あ!失礼いたしました、回答ごとに分岐の間違いです。 もし回答いただけましたらよろしくお願い致します。
h2h1h8h6

2023/04/16 00:54

yambejp様 先日はいろいろとご教授いただきありがとうございました。 分岐のところ、できるまで頑張ってみます。 また何かの際は、恐れ入りますがどうぞよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問