javascriptのデータ属性で、同じ属性名のものをそれぞれ判別して表示させる

javascriptのデータ属性について分からないことがあり困っています。
同じdiv要素に入っている各画像を ”data-img” という属性名として、それぞれを0～3までの引数にしました。
それらをクリックしたときに名前がalertで表示される仕組みです。自分はそれを条件分岐で判別するようにしましたが、どの画像もif文の最初の条件しか表示されません。
たとえば dataImg[2] なら Cさんが表示されるべきなのですが、どの人もAさんになってしまいます。
改善が見つけられなかったので、皆様のお力をいただきたいです。
よろしくお願いしますm(__)m

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>イメージギャラリー</title>
</head>
<body>
	<div class="tab" id="js-img">
		<div class="tab-nav">
			<a href="" class="tab-nav-item is-active" data-nav="0">Tab-0</a>
			<a href="" class="tab-nav-item" data-nav="1">Tab-1</a>
			<a href="" class="tab-nav-item" data-nav="2">Tab-2</a>
			<a href="" class="tab-nav-item" data-nav="3">Tab-3</a>
		</div>
		<div class="tab-contents"> 
			<img src="../img/Aさん.png" alt="Aさん" data-img="0">
			<img src="../img/Bさん.png" alt="Bさん" data-img="1">
			<img src="../img/Cさん.png" alt="Cさん" data-img="2">
			<img src="../img/Dさん.png" alt="Dさん" data-img="3">
		</div>
	</div>
	<script type="text/javascript" src="display.js"></script>
</body>
</html>

display.js

(() => {
	const $doc = document.getElementById('js-img');
	const $image = $doc.querySelectorAll('[data-img]');
	const $nav = $doc.querySelectorAll('[data-nav]');
	const navlen = $nav.length;
	const imagelen = $image.length;
	//初期表示
	const init = () => {
		$image[0].style.display = 'block';
		$image[1].style.display = 'none';
		$image[2].style.display = 'none';
		$image[3].style.display = 'none';
	};
	init();
	const handleClick = (e) => {
		e.preventDefault();
		const $this = e.target;
		const targetval = $this.dataset.nav;
		//対象外のnav,image全て一旦リセットする
		let index = 0;
		while(index < navlen){
			$image[index].style.display = 'none';
			$nav[index].classList.remove('is-active');
			index++;
		}
		$doc.querySelectorAll('[data-img="' + targetval +'"]')[0].style.display = 'block';
		$nav[targetval].classList.add('is-active');
	}
	//全nav要素に対して関数を適応・発火
	let index = 0;
	while(index < navlen){
		$nav[index].addEventListener('click', (e) => handleClick(e));
		index++;
	}
	const handleImg = (e) => {
		e.preventDefault();
		const $this = e.target;
		const targetImg = $this.dataset.img;
        //問題のAさんしか表示されない条件分岐
		if($image[0]){
			window.alert('Aさん')
		}else if($image[1]){
			window.alert('Bさん')
		}else if($image[2]){
			window.alert('Cさん')
		}else{
			window.alert('Dさん')
		}
		$doc.querySelectorAll('[data-img="'+ targetImg +'"]')[0].style.display = 'block';
	}
	let imageIndex = 0;
	while(imageIndex < imagelen){
		$image[imageIndex].addEventListener('click',(e)=>{
		handleImg(e);
		});
		imageIndex++;
	}
})();

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript の悪いところなんですが、if には boolean 以外も入れられます。で、$image[0] には何らかの要素がすでに入ってるわけで、それを if にかけると必ず true と判断され A さんの条件分岐にいってしまいます。ですので以下のようにして data-img の値を取り出してそれをもとに条件分岐すると良いでしょう。

JavaScript
1img_num = parseInt(e.target.getAttribute('data-img'))

投稿2021/01/07 05:21

A_kirisaki

総合スコア2853

of_the_Europa

2021/01/07 08:09

ご回答ありがとうございますm(__)m 上記の通りデータ型をnumberにして、data-imgの属性値を取得してから定数で条件分岐してみたのですが、今度はDさんがどの画像をクリックしてもalertで表示されてしまいます。その新しく書き換えた問題の部分が以下になります。 const handleImg = (e) => { e.preventDefault(); const $this = e.target; const targetImg = $this.dataset.img; const img_num = parseInt($this.getAttribute('data-img')); if(img_num[0]){ window.alert('Aさん') }else if(img_num[1]){ window.alert('Bさん') }else if(img_num[2]){ window.alert('Cさん') }else{ window.alert('Dさん') } console.log(typeof(img_unm)) $doc.querySelectorAll('[data-img="'+ targetImg +'"]')[0].style.display = 'block'; } なにか怪しいところがあれば、何卒教えていただければ幸いです。お時間いただき申し訳ありません。

A_kirisaki

2021/01/07 08:15

img_num は 0 は number なので配列じゃないですよ。getAttribute というのはその要素の属性を取り出すものです。ハンドラーが呼び出された時点で要素が何かは決まってますから、持っている属性も何になるか一意に定まります。

of_the_Europa

2021/01/13 02:27

ありがとうございます。 10日以上たってようやく解決いたしました（汗）問題の箇所が最終的にこのようになりました。 const img_num = parseInt(e.target.getAttribute('data-img')); if(img_num == 0){ window.alert('Aさん') }else if(img_num == 1){ window.alert('Bさん') }else if(img_num == 2){ window.alert('Cさん') }else{ window.alert('Dさん') } ＞img_num は 0 は number なので配列じゃないですよ。この意味をif文で表すのに相当な時間をかけてしまいました。プログラミング全体としての経験がまだまだ少ないなと実感しております。。。焦らず地道に経験積んでいきたいなと思います。ありがとうございましたm(__)m

行動規範の内容に同意します