実現したいこと
質問に合った動作をするようにしたいです
前提
とあるサイトを参考に、ソースまでは作ってみたのですが、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は参考ページのまんまに戻した状態です)
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/04/14 10:42
2023/04/14 11:18
2023/04/14 11:29
2023/04/16 00:54