回答編集履歴
1
調整
test
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
# jQuery
|
|
1
2
|
```javascript
|
|
2
3
|
<style>
|
|
3
4
|
.is_big{font-size:1.5em;}
|
|
@@ -5,7 +6,6 @@
|
|
|
5
6
|
<script>
|
|
6
7
|
$(function(){
|
|
7
8
|
$('#jsi-q10 li').on('click',function(){
|
|
8
|
-
|
|
9
9
|
var idx=$('#jsi-q10 li').index(this);
|
|
10
10
|
$('#jsi-q11 li').removeClass('is_big').eq(idx).addClass('is_big');
|
|
11
11
|
});
|
|
@@ -23,3 +23,29 @@
|
|
|
23
23
|
</ul>
|
|
24
24
|
```
|
|
25
25
|
該当するQ10を再度クリックしたらQ11をトグルする必要はないのですね？
|
|
26
|
+
# js
|
|
27
|
+
```javascript
|
|
28
|
+
<style>
|
|
29
|
+
.is_big{font-size:1.5em;}
|
|
30
|
+
</style>
|
|
31
|
+
<script>
|
|
32
|
+
document.addEventListener('click',e=>{
|
|
33
|
+
const t=e.target.closest('#jsi-q10 li');
|
|
34
|
+
if(t){
|
|
35
|
+
const idx=[...document.querySelectorAll('#jsi-q10 li')].indexOf(t);
|
|
36
|
+
document.querySelector('#jsi-q11 li.is_big')?.classList.remove('is_big');
|
|
37
|
+
document.querySelector(`#jsi-q11 li:nth-child(${idx+1})`).classList.add('is_big');
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
41
|
+
<ul class="u-mbm lists" id="jsi-q10">
|
|
42
|
+
<li>Q10_1</li>
|
|
43
|
+
<li>Q10_2</li>
|
|
44
|
+
<li>Q10_3</li>
|
|
45
|
+
</ul>
|
|
46
|
+
<ul class="u-mbm lists" id="jsi-q11">
|
|
47
|
+
<li>Q11_1</li>
|
|
48
|
+
<li>Q11_2</li>
|
|
49
|
+
<li>Q11_3</li>
|
|
50
|
+
</ul>
|
|
51
|
+
```
|