条件によって異なるページをモーダルで表示させたい。

前提・実現したいこと

YES/NO診断ページで診断結果をモーダルで出したい。
診断結果は3つある。（YESの数に応じて診断結果が異なる）

下記のページを参考に診断ページを作成しましたが、
診断結果をモーダルで出したいです。（レスポンシブで出したい）
条件によって出すページが違うので上手く表示できない状況です。。
何か良いソースコードの書き方を教えてください。よろしくお願いします。

▼現段階のソース▼

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>物件購入診断ページ</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <link rel="stylesheet" href="css/reset.css">  <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script> <script type="text/javascript" src="js/modal.js"></script> <script> $(function(){ //ボタンがクリックされた時 $("button").click(function(){ //一度結果を非表示にする $(".result").hide();

                //問題数を取得
                var qNum = $("ul li").length;

                if( $("ul li input:checked").length < qNum ){
                    //全てチェックしていなかったらアラートを出す
                    alert("未回答の問題があります");
                } else {
                    //チェックされているinputの数を取得
                    var typeANum = $(".typeA:checked").length,
                        typeBNum = $(".typeB:checked").length,
                        typeCNum = $(".typeC:checked").length,
                        typeDNum = $(".typeD:checked").length;
                    if( typeANum >= 4 ) {
                        //4個以上の場合
                        $(".resultA").fadeIn();
                    } else if( typeANum >= 2 ) {
                        //2～3個の場合
                        $(".resultB").fadeIn();
                    } else if( typeANum >= 0 ) {
                        //0～1個の場合
                        $(".resultC").fadeIn();
                    } 
                }
            });
        })
    </script>

▼参考にしたページ▼
https://sole-color-blog.com/blog/1060/

Lhankor_Mhy

2020/05/21 04:08

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3

tomokonkon

2020/05/21 05:16

失礼いたしました。質問を編集いたします。

Lhankor_Mhy

2020/05/21 07:07

modal.js には何が入っていますか？

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じです。

javascript
1<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
4<script>
5$(function(){
6  $('.result').hide();
7  $("button").on('click',function(){
8    $('.result').hide();
9    var l1=$.unique($(':radio').map(function(){return $(this).attr('name');})).length;
10    var l2=$(':radio:checked').length;
11    var l3=$(':radio.typeA:checked').length;
12    switch(true){
13    case l1>l2:
14      $('.resultErr').dialog({
15      modal:true,
16      title:"エラー",
17      buttons: {
18        "確認": function() {
19          $(this).dialog("close");
20        },
21      }
22      });
23      break;
24    case l3>=4:
25      $('.resultA').dialog({
26      modal:true,
27      title:"答えが4つ以上",
28      buttons: {
29        "確認": function() {
30          $(this).dialog("close");
31        },
32      }
33      });
34      break;
35    case l3>=2:
36      $('.resultB').dialog({
37      modal:true,
38      title:"YESが2-3つ",
39      buttons: {
40        "確認": function() {
41          $(this).dialog("close");
42        },
43      }
44      });
45      break;
46    default:
47      $('.resultC').dialog({
48      modal:true,
49      title:"YESが0-1つ",
50      buttons: {
51        "確認": function() {
52          $(this).dialog("close");
53        },
54      }
55      });
56      break;
57    }
58  });
59});
60</script>
61<div id="wrapper">
62<div class="question">
63<h1>今のあなたの状況は？</h1>
64<ul>
65<li> <span>Q1. 質問ここに入る</span>
66<label><input type="radio" name="q01" class="typeA">YES</label>
67<label><input type="radio" name="q01" class="typeB">NO</label>
68</li>
69<li> <span>Q2. 質問ここに入る</span>
70<label><input type="radio" name="q02" class="typeA">YES</label>
71<label><input type="radio" name="q02" class="typeB">NO</label>
72</li>
73<li> <span>Q3. 質問ここに入る</span>
74<label><input type="radio" name="q03" class="typeA">YES</label>
75<label><input type="radio" name="q03" class="typeB">NO</label>
76</li>
77<li> <span>Q4. 質問ここに入る</span>
78<label><input type="radio" name="q04" class="typeA">YES</label>
79<label><input type="radio" name="q04" class="typeB">NO</label>
80</li>
81<li> <span>Q5. 質問ここに入る</span>
82<label><input type="radio" name="q05" class="typeA">YES</label>
83<label><input type="radio" name="q05" class="typeB">NO</label>
84</li>
85<li> <span>Q6. 質問ここに入る</span>
86<label><input type="radio" name="q06" class="typeA">YES</label>
87<label><input type="radio" name="q06" class="typeB">NO</label>
88</li>
89</ul>
90<button>診断する</button>
91</div>
92<div class="result resultErr">
93<p>未回答の問題があります</p>
94</div>
95<div class="result resultA">
96<h2>YESの数が4個以上<br>
97</h2>
98<p>答が入る</p>
99<p><a href="#">セミナー申し込み</a></p>
100</div>
101<div class="result resultB">
102<h2>YESの数が2～3個<br>
103</h2>
104<p>答が入る</p>
105<p><a href="#">セミナー申し込み</a></p>
106</div>
107<div class="result resultC">
108<h2>YESの数が0～1個<br>
109</h2>
110<p>答が入る。</p>
111<p><a href="#">セミナー申し込み</a></p>
112</div>
113</div>
114