サムネイル画像をクリックしてメイン画像を切り替え、もう一度クリックで画像を消す

Question

実現したいこと

JS初心者で勉強中です。
サムネイル画像をクリックしたらメイン画像を切り替えるところまではできたのですが、
選択している画像のサムネイル画像をもう一度押したらメイン画像を消すことをやりたいのですがうまくできません。
それと、選択中のサムネイル画像の<li>のタグにactiveのクラスの付与させたいです。

該当のソースコード

<script>
var selectimg = document.querySelectorAll('.select-imgsrc');
for (var i =0 ; i < selectimg.length; i++ ) {
	selectimg[i].onclick = function() {
		document.getElementById('select-img').src = this.dataset.selectimgsrc;
	};
}
</script>

<div>
	<img id="select-img" src=""> <!-- ←クリックしたサムネイル画像をここにセット -->
</div>
<ul>
	<li class="select-img_list"><img src="selectimg.jpg" class="select-imgsrc" data-selectimgsrc="selectimg.jpg"></li>
	<li class="select-img_list"><img src="selectimg2.jpg" class="select-imgsrc" data-selectimgsrc="selectimg2.jpg"></li>
	<li class="select-img_list"><img src="selectimg3.jpg" class="select-imgsrc" data-selectimgsrc="selectimg3.jpg"></li>
</ul>

試したこと

googleで色々模索しましたがヒントになるようなものを見つけられませんでした。

Comments

[yambejp]

「メイン画像を消す」の意図がわからないです
ふつうメイン画像は表示しっぱなしです

Answer 1

「消す」という動作には個人的には賛同しておりませんが、こんなかんじ

<script>
document.addEventListener('click',({target})=>{
  if(target.matches('[data-selectimgsrc]')){
    const selectImg=document.querySelector('#select-img');
    const src=target.dataset.selectimgsrc;
    selectImg.src=selectImg.src==src?"":src;
  }
});
</script>
<div>
<img id="select-img" src="">
</div>
<ul>
<li class="select-img_list"><img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" class="select-imgsrc" data-selectimgsrc="https://placehold.jp/ff0000/00ffff/400x400.png?text=1"></li>
<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>
<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>
</ul>                                                                                                                                         

調整

document.addEventListener('click',({target})=>{
  if(target.matches('[data-selectimgsrc]')){
    const selectImg=document.querySelector('#select-img');
    const src=target.dataset.selectimgsrc;
    selectImg.src=selectImg.src==src?"":src;
    document.querySelectorAll('.select-img_list').forEach(x=>x.classList.toggle('active',x==target.closest('.select-img_list') && selectImg.getAttribute('src')!==""));
  }
});

Comments

[help2023]

ありがとうございます。
動作的には理想通りでございますが、クリックしたサムネイル画像の<li>タグにactiveのクラスが付与されたら理想です。
今クリックしているサムネイル画像にactiveを付与したいです。

[yambejp]

調整版あげました、想定動作とあっていますか？

[help2023]

ありがとうございます。
理想通りの動作になりました。
とても勉強になりました。

Answer 2

classList.toggle() でできるかと思います。

if (this.closest('li').classList.toggle('active')) {
  document.getElementById('select-img').src = ...;
} else {
  // ここでメイン画像を消す
}

Comments

[help2023]

ありがとうございます。
ご連絡いただいた方法で試したところactiveが付与されましたのですが、
サムネイル画像1をクリックしたらactiveが付与されて、サムネイル画像2をクリックした時にサムネイル画像1に付与されているactiveを消すことはできますでしょうか？

[int32_t]

> サムネイル画像2をクリックした時にサムネイル画像1に付与されているactiveを消す

では、この if の前に「this.closest('li') 以外の li.active から active を消す」というコードを入れましょう。こんな感じです:
[...document.querySelectorAll('li.active')].filter(li => li != this.closest('li')).forEach(li => li.classList.toggle('active'));