前提・実現したいこと

質問の回答によって結果が分岐する診断テストを作成しています。

「よくある」「まあまあある」「あまりない」「ほとんどない」にそれぞれ3点、2点、1点、0点を割り振ります。
トータルの点数が25点以上であった場合
トータルの点数が25点以上かつq19で「ほとんどない」出会った場合
トータルの点数が25点以上かつq20で「ほとんどない」出会った場合
トータルの点数が25点以上かつq21で「ほとんどない」出会った場合
トータルの点数が25点以上かつq19,q20で「ほとんどない」出会った場合
トータルの点数が25点以上かつq19,q22で「ほとんどない」出会った場合
トータルの点数が25点以上かつq20,q22で「ほとんどない」出会った場合
トータルの点数が25点以上かつq19,q20,q22で「ほとんどない」出会った場合
それ以外
に分けて結果を表示したいです。

発生している問題・エラーメッセージ

トータルの点数が25点以上であった場合
それ以外の場合
はうまくいきます。
しかしそれ以外の分岐がうまくいきません。

60~110行目のに分岐を記載しました。

該当のソースコード


<!DOCTYPE html>
<html>
	<head>
		<title>診断系コンテンツ</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="check.css" type="text/css" />
       
    
        <script src="jquery-3.5.1.min.js"></script>
		<script>
			
			
			//-----初期設定
			function initFunc(){
				selectArray = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
				scoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
				qNum = selectArray.length;
			}

			// ,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
			// ,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
			
			function preloadFunc() {
				for(var i = 0; i< arguments.length; i++){
					$("<img>").attr("src", arguments[i]);
				}
			}
			
			function againFunc(){
				moveFunc(-1);
				for (var i in selectArray){
					var selectID = selectArray[i];
					$("#" + i + "_" + selectID).removeClass("selected");
				}
				initFunc();//---初期化
			}
			
			function quesFunc(){
				var idArray = this.id.split("_");
				var qID = Number(idArray[0]);
				var ansID = Number(idArray[1]);
				var selectID = selectArray[qID];
				if (ansID == selectID) return;
				$("#" + qID + "_" + ansID).addClass("selected");
				$("#" + qID + "_" + selectID).removeClass("selected");
				selectArray[qID] = ansID;
				moveFunc(qID);
			
				scoreArray[qID] =  Number($(this).attr("sc"));
               
				if (qID+1 >= qNum) resultFunc();//---最後の質問かをチェック
                
			}

            function resultFunc(){
				alert("合計得点の算出を開始！")
			}
			
			function resultFunc(){
				var totalScore = 0;
				for(var i in scoreArray){
					totalScore += scoreArray[i];
				}
				
				var q19 = $('li').hasClass('18_1');
				var q20 = $('li').hasClass('19_1');
				var q22 =$('li').hasClass('21_0');

				switch (true){
					case (totalScore >= 25 && q19 == true && q20 == true && q22 == true):
						var lv = 8;
					case (totalScore >= 25 && q22 == true && q20 == true):
						var lv = 7;
					case (totalScore >= 25 && q19 == true && q22 == true):
						var lv = 6;
					case (totalScore >= 25 && q19 == true && q20 == true):
						var lv = 5;
					case (totalScore >= 25 && q22 == true):
						var lv = 4;
					case (totalScore >= 25 && q20 == true):
						var lv = 3;
					case (totalScore >= 25 && q19 == true):
						var lv = 2;
					case totalScore >= 25:
						var lv = 1;
						break;
					default:
						var lv = 0;
				}
				$("#resultPoint").text(totalScore);
				$("#resultImage").css("background-image", "url('images/lv"+lv+".png')");
				var myData = resultArray[lv];
				$("#resultTitle").text(myData.split(",")[0]);
				$("#resultText").text(myData.split(",")[1]);
			}
			
			function moveFunc(vol){
				var myPos = (vol+1) * -650;
				$("#qContainer").delay(500).animate({left: myPos},500);
			}
			
			$(function(){
				initFunc();//---初期化
				
				$.get('result.csv', function(myData){resultArray = myData.split("\r\n")});
				preloadFunc("images/lv0.png","images/lv1.png","images/lv2.png","images/lv3.png","images/lv4.png", "images/againOn.png");
				$("ul>li").click(quesFunc);
				$("#againButton").click(againFunc);
			});

			
		</script>
</head>
	<body>
		<div id="qArea">
		<div id="qContainer">

                <div class="qBox">
                        <div class="ques"><span class="qNum">Q1</span>　会社や学校などでケアレスミスをしてしまったり、<br>細かい部分に注意を払えないことがある</div>
                        <ul>
                            <li id="0_0" sc="3">よくある</li>
                            <li id="0_1" sc="2">まあまあある</li>
                            <li id="0_2" sc="1">あまりない</li>
                            <li id="0_3" sc="0">ほとんどない</li>
                            
                        </ul>       
              </div>
	
			<div class="qBox">
				<div class="ques"><span class="qNum">Q2</span>　席にいるとき手足を触ってしまったり落ち着いていられない</div>
				<ul>
					<li id="1_0" sc="3">よくある</li>
					<li id="1_1" sc="2">まあまあある</li>
					<li id="1_2" sc="1">あまりない</li>
					<li id="1_3" sc="0">ほとんどない</li>
					
				</ul>
				
			</div>
			
//一部質問省略
			
		
				<div class="qBox">
					<div class="ques"><span class="qNum">Q19</span>　7歳以前のときも、<br>Q18までのような傾向はまあまあ〜かなりあった</div>
					<ul>
						<li id="18_0" sc="0">ある</li>
						<li id="18_1" sc="0">ほとんどない</li>
						
					</ul>
				</div>

				
				<div class="qBox">
					<div class="ques"><span class="qNum">Q20</span>　Q18のような傾向が<br>職場、家庭問わずある</div>
					<ul>
						<li id="19_0" sc="0">よくある</li>
						
						<li id="19_1" sc="0">ほとんどない</li>
						
					</ul>
					
				</div>

				
		
				<div class="qBox">
					<div class="ques"><span class="qNum">Q21</span>　これらの経験によって職場や生活において<br>深刻な問題になったことがある</div>
					<ul>
						<li id="20_0" sc="0">よくある</li>
						<li id="20_1" sc="0">まあまあある</li>
						<li id="20_2" sc="0">あまりない</li>
						<li id="20_3" sc="0">ほとんどない</li>
						
					</ul>
					
				</div>
		
				<div class="qBox">
					<div class="ques"><span class="qNum">Q22</span>　以前に精神疾患と診断されたことがある。<br>またはそうであると自覚したことがある</div>
					<ul>
						<li id="21_0" sc="0">ある</li>

						<li id="21_1" sc="0">ない</li>
						
					</ul>
				</div> 
			

			<div class="qBox">
				<div id="resultBox">
					<div id="resultTitle">実業家級サラリーマン</div>
					<div id="resultPoint">15</div>
					<div id="resultLeft">
						<div id="resultText">実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文
						</div>
						<div id="againButton"></div>
					</div>
					<div id="resultImage"></div> 
				</div>
			</div>
	
		</div>
		</div>
	</body>
</html>

試したこと

csvのデータは破損していませんでした。
jqueryも問題なく動いていそうでした。

補足情報（FW/ツールのバージョンなど）

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

回答1件

ベストアンサー

こんにちは。

break置き忘れが原因では？

break を置かな買った場合、スクリプトは基準を満たす case から実行され、その後の case も条件に合うかに関係なく実行されます。

break を置かないとどうなるか | switch - JavaScript | MDN

コメントを受けて追記

js
1                var q19 = $('li').hasClass('18_1');
2                var q20 = $('li').hasClass('19_1');
3                var q22 =$('li').hasClass('21_0');

↑この部分がおかしいのではないかな、と思いました。
q19という変数に'18_1'を参照して代入しているのは違和感がありますし、なによりquesFunc()では選択された答えにはselectedというクラスがついているようです。

投稿2020/07/22 07:05

編集2020/07/25 02:56

Lhankor_Mhy

総合スコア36115

pppppppppp

2020/07/22 07:23

すごい！！できました！！！ありがとうございます！！！

pppppppppp

2020/07/24 10:47

すみません、breakをいれたら解決したかと思ったのですが、やはりできていませんでした、、、こんな感じで直してみました。合っていますでしょうか？ switch (true){ case (totalScore >= 25 && q19 == true && q20 == true && q22 == true): var lv = 8; break; case (totalScore >= 25 && q22 == true && q20 == true): var lv = 7; break; case (totalScore >= 25 && q19 == true && q22 == true): var lv = 6; break; case (totalScore >= 25 && q19 == true && q20 == true): var lv = 5; break; case (totalScore >= 25 && q22 == true): var lv = 4; break; case (totalScore >= 25 && q20 == true): var lv = 3; break; case (totalScore >= 25 && q19 == true): var lv = 2; break; case totalScore >= 25: var lv = 1; break; default: var lv = 0; }

pppppppppp

2020/07/24 10:48

私の記憶違いかもしれないのですが、昨日サイトにアップロードしたときはできていた気がしています。キャッシュは削除した上で確認しましたがやはりできていませんでした。

pppppppppp

2020/07/26 09:38

.hasClass(）を使っているのに実際の質問項目にclass名を足していないことが原因でした。下記のようにHTMLを変更したことで正確な診断が行われるようになりました。 <div class="ques"><span class="qNum">Q19</span>　7歳以前のときも、<br>Q18までのような傾向はまあまあ〜かなりあった</div> <ul> <li id="18_0" sc="0">ある</li> <li id="18_1" class="18_1" sc="0">ほとんどない</li> </ul> </div>

pppppppppp

2020/07/26 09:39

Lhankor_Mhyさま、本当にありがとうございました。ルール違反を犯してしまった中、ご親切にしてくださったおかげで答えにたどり着くことができました。精進いたします、、、！

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