JavaScript「同じイベントが起こる要素」を複数作りたい

前提・実現したいこと

「Aにマウスオーバーする→A1にイベント発生」
「Bにマウスオーバーする→B1にイベント発生」

というように、同じ動作をするアイテムを複数作りたいのですが、
一つにしか反映されないか、全て同時に反映されてしまうかになってしまいます。

同じクラス名をあてているので、
querySelectorで書くと当然一つのアイテムにしか反映されず（前者）、
querySelectorAllとforEachで書くと一気に処理がされてしまい（後者）、どうすれば良いのか困っております。

thisを使う？など考え色々と調べたり試したりしているのですが
どうにも分からないため質問させていただきました。

初心者で恐縮ですが、よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<body>
2  <div class="items">
3    <ul class="items-in">
4      <li class="item">
5        <div class="item-img"></div> 
6        <p class="item-txt">あああ</p>
7        <a class="item-link" href="#"></a>
8      </li>
9      <li class="item">
10        <div class="item-img"></div> 
11        <p class="item-txt">いいい</p>
12        <a class="item-link" href="#"></a>
13      </li>
14    </ul>
15  </div>
16  <script type="text/javascript" src="js/main2.js"></script>
17</body>

js
1const Item = document.querySelectorAll('.item-img');
2const Link = document.querySelectorAll('.item-link');
3
4Link[0].addEventListener('mouseenter', ()=>{
5  if(Item[0].classList.contains('scale-bg')=== false){
6  Item[0].classList.add('scale-bg');
7  }
8}); 
9
10Link[1].addEventListener('mouseenter', ()=>{
11  if(Item[1].classList.contains('scale-bg')=== false){
12  Item[1].classList.add('scale-bg');
13  }
14});

css
1*{
2	margin: 0;
3	padding: 0;
4	box-sizing: border-box;
5}
6a{
7	text-decoration: none;
8}
9li{
10	list-style: none;
11}
12
13/* ------------- */
14
15.items{
16	width: 300px;
17	margin: 0 auto;
18}
19.items-in{
20	display: flex;
21	justify-content: space-between;
22}
23.item{
24	position: relative;
25	text-align: center;
26}
27.item-img{
28	width: 120px;
29	height: 120px;
30	border-radius: 60px;
31	background-color: #d8effc;
32	transition: .3s all;
33}
34.item-img.scale-bg{
35	transform: scale(1.2, 1.2); 
36}
37.item-link{ 
38	display: block;
39	position: absolute;
40	top: 0;
41	left: 0;
42	width: 100%;
43	height: 100%;
44}

試したこと

色々試した結果、上記コードで目的の動きにはなるのですが、
アイテムが増えるごとに同じことをたくさん書かなくてはいけません。
きっともっと効率の良い書き方があると思うのですが分かりません…

要は、「A、A1を含む要素にマウスオーバー」→「A1に動き」を複数生成したいということなのですが、そもそもこの方法以外でやり方がありますでしょうか。何かわざわざ面倒なことをしているような気もしています。

アドバイスいただけたら大変助かります！
お手数ですが何卒よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

maisumakun

2020/11/19 08:27

HTML構造はすべての<li class="item">について全く同じ、ということで間違いないですか？

achiachi

2020/11/19 08:30

早速ありがとうございます！はい、おっしゃる通りです。よろしくお願いいたします。

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

回答1件

ベストアンサー

イベントの発生した要素を基準として、変更対象の要素を探すようにしてはいかがでしょうか？

javascript
1const Links = document.querySelectorAll('.item-link');
2
3Links.forEach(link => {
4  link.addEventListener('mouseenter', (e)=>{
5    const item = e.target.closest('li.item').querySelector('.item-img');
6    if(!item.classList.contains('scale-bg')){
7      item.classList.add('scale-bg');
8    }
9  }); 
10})

投稿2020/11/19 08:35

編集2020/11/19 08:35

maisumakun

総合スコア146063

maisumakun

2020/11/19 08:36

jsFiddleにも書いてみました。 https://jsfiddle.net/nhkywf3m/

achiachi

2020/11/19 09:20

基準に対して、探して、処理するのですね！ closestメソッドを知りませんでした。このように書けるのですね、大変勉強になりました。丸1日悩んでいましたが、こんなに早くご回答をいただけ、感動です。まだまだ先は長いなと思いました；ちなみにがclosest()に「li.item」を書かれていますが、「.item」ではだめなのかなと思い、そうしてみましたところ、これでも動きました。意味的に「li.item」が正しいのだろうと想像していますが、まだよく理解できていませんので、引き続き勉強しようと思います。本当にどうもありがとうございました！

maisumakun

2020/11/19 09:40

> ちなみにがclosest()に「li.item」を書かれていますが、「.item」ではだめなのかなと思い、そうしてみましたところ、これでも動きました。どちらでも大丈夫です。

achiachi

2020/11/19 23:54

そうなのですね、ご丁寧にありがとうございます。頑張ります。

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