jQueryの一部が効きません。

前提・実現したいこと

html,css,jQueryで勉強用の問題を出題するサイト(自分用でhtmlに直接書き込むつもり)を作りたいと思っています。

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

opacityを操作し問題や答えを表示するつもりなのですが、答えが表示されなかったり、英語以外を選択すると問題が表示されなかったりします。

該当のソースコード

html
1<html>
2    <head>
3        <meta charset="utf-8">
4        <title>Study</title>
5        <link rel="stylesheet" href="study.css">
6        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7    </head>
8    
9    
10    <body>
11        <div class="header">
12            
13        </div>
14        
15        
16        <div class="main">
17            <div class="subject">
18	            <input type="radio" name="subject" id="subject1" value="1">
19	            <label for="subject1">英語</label>
20                <input type="radio" name="subject" id="subject2" value="2">
21	            <label for="subject2">古文</label>
22                <input type="radio" name="subject" id="subject3" value="3">
23	            <label for="subject3">漢文</label>
24	            <input type="radio" name="subject" id="subject4" value="4">
25	            <label for="subject4">世界史</label>
26	            <input type="radio" name="subject" id="subject5" value="5">
27	            <label for="subject5">地理</label>
28                <input type="radio" name="subject" id="subject6" value="6">
29	            <label for="subject6">化学</label>
30            </div>
31            
32            <div class="input-box1">
33                <div class="number">問題数</div>
34                <input type="number" id="number1" name="number1" value="10" min="1">
35            </div>
36            
37            <div class="input-box2">
38                <div class="number">時間(秒)</div>
39                <input type="number" id="second1" name="number1" value="2" min="1">
40            </div>            
41            
42          
43            
44            <input type="button" id="button1" value="START">
45            
46            <input type="button" id="button2" value="NEXT">
47            
48            
49<!------英語------>
50            <div class="study1">a</div>            
51            <div class="study1">b</div>            
52            <div class="study1">c</div>            
53            <div class="study1">d</div>            
54            <div class="study1">e</div>            
55            <div class="study1">f</div>         
56            <div class="study1">g</div>           
57            <div class="study1">h</div>          
58            <div class="study1">i</div>            
59            <div class="study1">j</div>
60                        
61            <div class="answer1">a</div>
62            <div class="answer1">b</div>
63            <div class="answer1">c</div>
64            <div class="answer1">d</div>
65            <div class="answer1">e</div>
66            <div class="answer1">f</div>
67            <div class="answer1">g</div>
68            <div class="answer1">h</div>
69            <div class="answer1">i</div>
70            <div class="answer1">j</div>
71                        
72            
73<!------古文------>    
74            <div class="study2">a2</div>            
75            <div class="study2">b2</div>            
76            <div class="study2">c2</div>            
77            <div class="study2">d2</div>            
78            <div class="study2">e2</div>            
79            <div class="study2">f2</div>         
80            <div class="study2">g2</div>           
81            <div class="study2">h2</div>          
82            <div class="study2">i2</div>            
83            <div class="study2">j2</div>
84                        
85            <div class="answer2">a</div>
86            <div class="answer2">b</div>
87            <div class="answer2">c</div>
88            <div class="answer2">d</div>
89            <div class="answer2">e</div>
90            <div class="answer2">f</div>
91            <div class="answer2">g</div>
92            <div class="answer2">h</div>
93            <div class="answer2">i</div>
94            <div class="answer2">j</div>
95
96        </div>
97   
98        <script src="study.js"></script>
99    </body>
100</html>

css
1body {
2    background: #ECEFF1;
3}
4.subject {
5	width: 90%;
6	margin: 2em auto;
7	text-align: left;
8}
9.subject input[type='radio'] {
10	position: absolute;
11	z-index: -1;
12	opacity: 0;
13}
14.subject label {
15	position: relative;
16	display: inline-block;
17	margin-right: 30px;
18	padding-right: 10px;
19	padding-left: 35px;
20	cursor: pointer;
21    font-size:30px;
22}
23.subject label::before {
24	position: absolute;
25	z-index: -1;
26	top: 0;
27	left: 0;
28	display: block;
29	width: 24px;
30	height: 24px;
31	content: ' ';
32	border: 2px solid dodgerblue;
33	border-radius: 4px;
34}
35.subject input[type='radio'] + label::before {
36	border-radius: 36px;
37}
38.subject input[type='radio']:checked + label {
39	padding-left: 10px;
40	color: #ffffff;
41}
42.subject input[type='radio']:checked + label::before {
43	top: 0;
44	width: 100%;
45	height: 100%;
46	background: dodgerblue;
47}
48
49.subject label, .subject label::before {
50	-webkit-transition: 0.25s all ease;
51	        transition: 0.25s all ease;
52}
53
54.input-box1 {
55    position:absolute;
56    top: 100px;
57    left: 100px;
58    margin: auto;
59    max-width: 200px;
60    width: 100%; 
61}
62.input-box1:before {
63    position:absolute;
64    top: 36px;
65    right: 20px;
66    color:dodgerblue;
67    font-size: 20px;
68    content: "▲";
69    pointer-events: none;
70}
71.input-box1:after {
72    position: absolute;
73    bottom: 48px;
74    right: 20px;
75    color:dodgerblue;
76    font-size: 20px;
77    content: "▼";
78    pointer-events: none;
79}
80
81.input-box2 {
82    position:absolute;
83    top: 100px;
84    left: 400px;
85    margin: auto;
86    max-width: 200px;
87    width: 100%; 
88}
89.input-box2:before {
90    position:absolute;
91    top: 36px;
92    right: 20px;
93    color:dodgerblue;
94    font-size: 20px;
95    content: "▲";
96    pointer-events: none;
97}
98.input-box2:after {
99    position: absolute;
100    bottom: 48px;
101    right: 20px;
102    color:dodgerblue;
103    font-size: 20px;
104    content: "▼";
105    pointer-events: none;
106}
107
108
109#number1,#second1 {
110    box-sizing: border-box;
111    display: block;
112    margin: 0 auto 40px;
113    border: none;
114    border-radius:10px;
115    padding: 20px 60px 20px 20px;
116    width:100%;
117    font:20px "Avenir Next";
118    box-shadow: 0 0 2px rgba(0, 0, 0, .5) inset;
119    -webkit-appearance:none;
120}
121    
122#number1:focus,#second1:focus {
123    outline:none;
124}
125
126#number1::-webkit-inner-spin-button,
127#second1::-webkit-inner-spin-button{
128    position:absolute;
129    top: 0; 
130    bottom: 0;
131    right: 0; 
132    margin:auto;
133    transform: scale(5); 
134    transform-origin: right center;
135    opacity: 0;
136}
137    
138#number1::-webkit-contacts-auto-fill-button,
139#second1::-webkit-contacts-auto-fill-button{
140      opacity: 0; 
141}
142
143#button1 {
144    position:absolute;
145    top:200px;
146    left:45%;
147    display: inline-block;
148    border-radius:5%;          
149    font-size:18pt;        
150    text-align:center;      
151    cursor: pointer;     
152    padding:12px 12px;   
153    background:#000066;     
154    color:#ffffff;     
155    line-height:1em;         
156    transition: .3s;         
157    box-shadow:6px 6px 3px #666666;  
158    border:2px solid #000066;    
159}
160#button2 {
161    position:absolute;
162    opacity:0;
163    bottom:0;
164    left:45%;
165    display: inline-block;
166    border-radius:5%;          
167    font-size:18pt;        
168    text-align:center;      
169    cursor: pointer;     
170    padding:12px 12px;   
171    background:#000066;     
172    color:#ffffff;     
173    line-height:1em;         
174    transition: .3s;         
175    box-shadow:6px 6px 3px #666666;  
176    border:2px solid #000066;    
177}
178
179#button1:hover,#button2:hover {
180    box-shadow:none;        
181    color:#000066;     
182    background:#ffffff;     
183}
184
185
186
187
188.study1, .study2 {
189    opacity:0; 
190    font-size:40px;
191    position:absolute;
192    top:300px;
193    left:48%;
194    transform:translateX(-50%);
195}
196
197.answer1, .answer2 {
198    opacity:0;
199    font-size:30px;
200    position:absolute;
201    top:350px;
202    left:48%;
203    transform:translateX(-50%);
204}

jQuery
1$(function() {       
2    $('#button1,#button2').click(function(){
3        var sub = $('input[name=subject]:checked').val();
4        var count = $('.study'+ sub).length;
5        var randomNum = Math.floor(Math.random() * (count - 1  + 1)) + 1;
6        var nth = 'nth-child(' + randomNum +')';
7        var val1 = $('#number1').val();
8        var number1 = Number(val1) || 0;
9        
10        var val2 = $('#second1').val();
11        var number2 = Number(val2) || 0;
12        var number2a = number2 * 1000
13        var number2b = number2a + 1000
14        
15        for(var i = 0; i <= number1; i++){
16            $('.study' + sub + ':' + nth).css('opacity','1');              
17            $('#button1').css('opacity','0');   
18                
19            $('.answer' + sub + ':' + nth).delay(number2a).queue(function(){
20                $(this).css('opacity','1');
21            });            
22            $('#button2').delay(number2b).queue(function(){
23                $(this).css('opacity','1');
24            });  
25        }
26          
27    });    
28});

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

kei344

2021/07/10 14:44

JavaScriptを質問文に追記しましょう。

Holmes

2021/07/10 14:50

確認せず投稿してしまいすみません。どこかのタイミングで消えてしまっていたみたいです。

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

回答1件

ベストアンサー

.study1:nth-child(10)は、
兄弟要素の中で10番目の.study1という意味であって、
兄弟要素の.study1で10番目という意味ではないです。

.study1:nth-child(10)は、具体的には以下の要素を指します

html
11番目        <div class="subject"> 
2                <input type="radio" name="subject" id="subject1" value="1">
3                <label for="subject1">英語</label>
4                <input type="radio" name="subject" id="subject2" value="2">
5                <label for="subject2">古文</label>
6                <input type="radio" name="subject" id="subject3" value="3">
7                <label for="subject3">漢文</label>
8                <input type="radio" name="subject" id="subject4" value="4">
9                <label for="subject4">世界史</label>
10                <input type="radio" name="subject" id="subject5" value="5">
11                <label for="subject5">地理</label>
12                <input type="radio" name="subject" id="subject6" value="6">
13                <label for="subject6">化学</label>
14            </div>
15
162番目       <div class="input-box1">
17                <div class="number">問題数</div>
18                <input type="number" id="number1" name="number1" value="10" min="1">
19            </div>
20
213番目       <div class="input-box2">
22                <div class="number">時間(秒)</div>
23                <input type="number" id="second1" name="number1" value="2" min="1">
24            </div>            
25
26
27
284番目       <input type="button" id="button1" value="START">
29
305番目       <input type="button" id="button2" value="NEXT">
31
32
33<!------英語------>
346番目       <div class="study1">a</div>            
357番目       <div class="study1">b</div>            
368番目        <div class="study1">c</div>            
379番目        <div class="study1">d</div>            
3810番目        <div class="study1">e</div>       ←ここ     
39            <div class="study1">f</div>         
40            <div class="study1">g</div>           
41            <div class="study1">h</div>          
42            <div class="study1">i</div>            
43            <div class="study1">j</div>