Q&A
実現したいこと
質問に合った動作をするようにしたいです
前提
とあるサイトを参考に、ソースまでは作ってみたのですが、jsについては難易度が高すぎて先に進めずつまずいております。どなたかご教授いただけませんでしょうか。
jsの知識が乏しいのでどうかよろしくお願いいたします。
希望の動作ができれば嬉しいので、下記の参考ページのjsの書き方が大幅に変更されても構いません。
【内容】
質問数：４段階
Q１の選択数：２⇒1か２選択で「次へ」ボタンが押せるようになりQ２へ
Q２の選択数：３⇒１～３どれか選択で「次へ」ボタンが押せるようになりQ３へ
Q３の選択数：３⇒１～３どれか選択すると、選択項目の下に隠しているコンテンツ（１種類）が表示され「次へ」ボタンが押せるようになりQ４へ
Q４の選択数：４⇒１～４どれか選択すると、選択項目の下に選択に合った内容のコンテンツ(これも最初は隠したいです)が表示され「次へ」ボタンが押せるようになり最後のサンクス表示
参考ページの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を元に、ところどころ触ってはみましたものの
Q１で「no」を選択するとQ２で選択後「次へ」の動作が効かず、Q３の内容が全て見えてしまったりと、どこをどうしたら良いのかわからなくなってしまいました。
（上記のjsは参考ページのまんまに戻した状態です）
回答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
総合スコア114814
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/04/14 10:42
2023/04/14 11:18
2023/04/14 11:29
2023/04/16 00:54