回答編集履歴
1
調整版
answer
CHANGED
|
@@ -17,4 +17,16 @@
|
|
|
17
17
|
<li class="select-img_list"><img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2" class="select-imgsrc" data-selectimgsrc="https://placehold.jp/00ff00/ff00ff/400x400.png?text=2"></li>
|
|
18
18
|
<li class="select-img_list"><img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3" class="select-imgsrc" data-selectimgsrc="https://placehold.jp/0000ff/ffff00/400x400.png?text=3"></li>
|
|
19
19
|
</ul>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
# 調整
|
|
23
|
+
```javascript
|
|
24
|
+
document.addEventListener('click',({target})=>{
|
|
25
|
+
if(target.matches('[data-selectimgsrc]')){
|
|
26
|
+
const selectImg=document.querySelector('#select-img');
|
|
27
|
+
const src=target.dataset.selectimgsrc;
|
|
28
|
+
selectImg.src=selectImg.src==src?"":src;
|
|
29
|
+
document.querySelectorAll('.select-img_list').forEach(x=>x.classList.toggle('active',x==target.closest('.select-img_list') && selectImg.getAttribute('src')!==""));
|
|
30
|
+
}
|
|
31
|
+
});
|
|
20
32
|
```
|