回答編集履歴
2
調整
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
</ul>
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
# 動的なhiddenのつけ外し
|
|
38
38
|
|
|
39
39
|
```html
|
|
40
40
|
<style>
|
|
@@ -71,4 +71,6 @@
|
|
|
71
71
|
<li class="item" id="item5">5</li>
|
|
72
72
|
</ul>
|
|
73
73
|
```
|
|
74
|
+
# 確認
|
|
75
|
+
- [codepen - YzMbYjb](https://codepen.io/yambejp/pen/YzMbYjb)
|
|
74
76
|
|
1
調整
test
CHANGED
|
@@ -33,3 +33,42 @@
|
|
|
33
33
|
<li class="item">5</li>
|
|
34
34
|
</ul>
|
|
35
35
|
```
|
|
36
|
+
|
|
37
|
+
＃動的なhiddenのつけ外し
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<style>
|
|
41
|
+
:nth-child(1 of .item:not(.hidden)){
|
|
42
|
+
color:red;
|
|
43
|
+
}
|
|
44
|
+
:nth-child(n+2 of .item:not(.hidden)){
|
|
45
|
+
background-Color:gray;
|
|
46
|
+
}
|
|
47
|
+
.hidden{
|
|
48
|
+
display:none;
|
|
49
|
+
}
|
|
50
|
+
</style>
|
|
51
|
+
<script>
|
|
52
|
+
document.addEventListener('change',({target})=>{
|
|
53
|
+
if(target.matches('[data-target]')){
|
|
54
|
+
console.log(document.querySelector(target.dataset.target));
|
|
55
|
+
document.querySelector(target.dataset.target).classList.toggle('hidden',target.checked);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
</script>
|
|
59
|
+
hidden:
|
|
60
|
+
<label><input type="checkbox" data-target="#item1">1</label>
|
|
61
|
+
<label><input type="checkbox" data-target="#item2">2</label>
|
|
62
|
+
<label><input type="checkbox" data-target="#item3">3</label>
|
|
63
|
+
<label><input type="checkbox" data-target="#item4">4</label>
|
|
64
|
+
<label><input type="checkbox" data-target="#item5">5</label>
|
|
65
|
+
|
|
66
|
+
<ul class="items">
|
|
67
|
+
<li class="item" id="item1">1</li>
|
|
68
|
+
<li class="item" id="item2">2</li>
|
|
69
|
+
<li class="item" id="item3">3</li>
|
|
70
|
+
<li class="item" id="item4">4</li>
|
|
71
|
+
<li class="item" id="item5">5</li>
|
|
72
|
+
</ul>
|
|
73
|
+
```
|
|
74
|
+
|