### 前提・実現したいこと JAVASCRIPT によるモダールの実装アウトプットの一貫でJAVASCRIPTのモーダルの実装を行なっております。それぞれの写真を押したらそれぞれのモーダルが表示されるということをやってみたかったのですが、各写真と各モーダルに固有のクラスを付与して、クリックしたら表示されるようになったのですが、　各写真にクラスをつけ、JavaScriptにその数だけコードを書くのは今後写真などが増えたりした場合、運用やメンテナンス的にあまりよくないと思い質問させていただきました。色々ネットや本で調べてみたのですが、結局できずに最終的に２つ目のコードで詰まってしまいました。これだとクリックしたら表示はされますが、他のmodalを持ったクラスの写真も表示されて閉じます。自分がやりたかったのは、その写真を押したらその写真のモーダルだけが表示されもう一度押したら閉じる機能を持ったモーダルです。根本的に考えた方が違うと思うのですが、自分で考えてダメでしたので質問させていただきました。よろしくお願いします。 ```ここに言語を入力 HTML function modalNav(){ const popup = document.querySelector('.popup'); let modal1 = document.querySelector('.modal-1'); let popup1 = document.querySelector('.popup-1'); let modal2 = document.querySelector('.modal-2'); let popup2 = document.querySelector('.popup-2'); let modal3 = document.querySelector('.modal-3'); let popup3 = document.querySelector('.popup-3'); modal1.addEventListener('click',()=>{ popup1.classList.add('active'); }); popup1.addEventListener('click',()=>{ popup1.classList.remove('active'); }); modal2.addEventListener('click',()=>{ popup2.classList.toggle('active'); }); popup2.addEventListener('click',()=>{ popup2.classList.remove('active'); }); modal3.addEventListener('click',()=>{ popup3.classList.toggle('active'); }); popup3.addEventListener('click',()=>{ popup3.classList.remove('active'); }); } modalNav(); ``` ２つ目 ```ここに言語を入力 document.querySelectorAll('.modal').forEach((modalTarget)=>{ modalTarget.addEventListener('click',()=>{ const popup = document.querySelectorAll('.popup'); popup.forEach((popupTarget)=>{ popupTarget.classList.add('active'); popupTarget.addEventListener('click',()=>{ popupTarget.classList.remove('active'); }); }); }); }); ```

	@@ -1 +1 @@
1	- モーダルの実装シンプルな書き方
1	+ 複数ある画像のモーダルの実装シンプルな書き方

質問編集履歴