javascriptでthisが効かなくて困っています

Question

前提

”青いボタンにマウスを乗せた時に画像を拡大する” という動作を実装したいと考えています。現状のコードではボタンにマウスを載せて画像を拡大するところまではできたのですが、1つのボタンにマウスを乗せると3つある画像がすべて拡大してしまいます。

thisを使えば自分が乗せたボタンのみ拡大できるという事は分かったのですが、”ボタンにマウスを載せて画像を拡大”という動作の関係で画像にaddeeventlistenerが使えずthisの使いどころが分からず困っています。

該当のソースコード

<div class="sectionContainer">
        <div class="imgParent">
          <img class="img" id="img1" src="http://presnt.jp/img/top/24.jpg" alt="">
        </div>
        <div class="scrollBtn">
          <a href="#" class="scrollBtnBefore"></a>
          <a href="#" class="scrollBtnAfter"></a>
        </div>
      </div>

      <div class="sectionContainer">
        <div class="imgParent">
          <img class="img" id="img2" src="http://presnt.jp/img/top/23.jpg" alt="">
        </div>
        <div class="scrollBtn">
          <a href="#" class="scrollBtnBefore"></a>
          <a href="#" class="scrollBtnAfter"></a>
        </div>
      </div>

      <div class="sectionContainer">
        <div class="imgParent">
          <img class="img" id="img3" src="http://presnt.jp/img/top/21.jpg" alt="">
        </div>
        <div class="scrollBtn">
          <a href="#" class="scrollBtnBefore"></a>
          <a href="#" class="scrollBtnAfter"></a>
        </div>
      </div>

.sectionContainer {
  margin: 0 auto 50px auto;
  width: 950px;
  max-width: 100%;
  position: relative;
}

.imgParent {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.img {
  width: 100%;
  transition: all 1.3s ease 0s;
}

.img:hover {
  transform: scale(1.05, 1.05);
}

.scrollBtn {
  display: flex;
  position: absolute;
  bottom: 0;
  right: -63px;
}

.scrollBtnBefore,
.scrollBtnAfter {
  display: block;
  height: 53px;
  width: 63px;
  background-color: #0000CD;
}

const btns = document.getElementsByClassName('scrollBtn');

for (let i = 0; i < btns.length; i++) {

  const imgs = document.getElementsByClassName('img');

  btns[i].addEventListener('mouseover', () => {
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].style.transform = "scale(1.05, 1.05)";
    }
  });

  btns[i].addEventListener('mouseout', () => {
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].style.transform = "scale(1, 1)";
    }
  });
}

Answer 1

「ホバーしたボタンの親の子孫の class="img"」を操作すればよいでしょう。

ボタンの情報はイベントオブジェクトから取れるので、実のところ this を使う必要はありません。以下のような感じです。

  btns[i].addEventListener('mouseover', event => {
    const img = event.target.closest('.sectionContainer').querySelector('.img');
    img.style.transform = "scale(1.05, 1.05)";
  });

Answer 2

ボタンにカスタムデータ属性を付与し、その値と同じid名をもつimgを拡大縮小する方法はいかがでしょうか？

• <div class="scrollBtn" data-scale-img="img1">　←これをクリックしたら
  • data-scale-img="img1"なので、
• <img class="img" id="img1" src="http://presnt.jp/img/top/24.jpg" alt=""> 　←idがimg1の画像を対象とする

また、mouseoverとmouseoutの時の処理内容がほぼ同じなので、1つの関数でどちらも対応できるようifで分岐させてみました。

コード例

• 動作確認用サンプル：https://jsfiddle.net/ox6upvy8/2/

<div class="sectionContainer">
  <div class="imgParent">
    <img class="img" id="img1" src="http://presnt.jp/img/top/24.jpg" alt="">
  </div>
  
  <!-- データ属性に対象の画像のid名をかく -->
  <div class="scrollBtn" data-scale-img="img1">
    <a href="#" class="scrollBtnBefore"></a>
    <a href="#" class="scrollBtnAfter"></a>
  </div>
</div>

<div class="sectionContainer">
  <div class="imgParent">
    <img class="img" id="img2" src="http://presnt.jp/img/top/23.jpg" alt="">
  </div>
  
  <!-- データ属性に対象の画像のid名をかく -->
  <div class="scrollBtn" data-scale-img="img2">
    <a href="#" class="scrollBtnBefore"></a>
    <a href="#" class="scrollBtnAfter"></a>
  </div>
</div>

<div class="sectionContainer">
  <div class="imgParent">
    <img class="img" id="img3" src="http://presnt.jp/img/top/21.jpg" alt="">
  </div>
  
  <!-- データ属性に対象の画像のid名をかく -->
  <div class="scrollBtn" data-scale-img="img3">
    <a href="#" class="scrollBtnBefore"></a>
    <a href="#" class="scrollBtnAfter"></a>
  </div>
</div>

// ボタン要素を取得
const btns = document.getElementsByClassName('scrollBtn');

// それぞれのボタンにホバー時とホバー解除時のイベントを設定
[...btns].forEach(btn => {
    btn.addEventListener('mouseover', changeScale);
    btn.addEventListener('mouseout', changeScale);
  }
);

// 画像を拡大・元のサイズに戻す関数
function changeScale(e) {
  const eventType = e.type; // 発生したイベントの種類が、mouseover か mouseoutか取得
  const targetId = e.currentTarget.dataset.scaleImg; // 対象ボタンのデータ属性の値を取得＝画像のid名と同じ
  const targetImg = document.getElementById(targetId); // 対象の画像をidで取得

  if (eventType === 'mouseover') { // mouseoverイベントの時実行
    targetImg.style.transform = 'scale(1.05, 1.05)';
  } else if(eventType === 'mouseout') { // mouseoutイベントの時実行
  	targetImg.style.transform = 'scale(1, 1)';
  }
}

thisじゃなくて…

ちなみに、addEventListener(イベントの種類, コールバック関数)でイベントが発生した要素を取得する方法はthisではありません。

例）

<div class="btn"><a href="#">button 1</a></div>
<div class="btn"><a href="#">button 2</a></div>
<div class="btn"><a href="#">button 3</a></div>

const btns = document.getElementsByClassName('btn');
[...btns].forEach(btn => btn.addEventListener('click', whichElement));

function whichElement(event) {
  // イベント情報
  console.log(event); // PointerEvent{...}

  // イベントの発生した要素
  console.log(event.target); // <a href="#">button 1</a>など

  // イベントが登録されている要素
  console.log(event.currentTarget); // <div class="btn"><a href="#">button 1</a></div>など
}

addEventListener()でイベントが発生すると、呼び出されたコールバック関数の引数には、自動的に発生したイベント情報が渡されます。
ですのでコールバック関数の引数の中には分かりやすくするためfunction myFunction(e)とかfunction myFunction(event)などと書かれます。

• eventで、発生したイベント情報を全て取得でき、
• event.targetで、eventの情報の中にある、イベントが発生した実際の要素を取得でき、
• event.currentTargetで、eventの情報の中にある、発生したイベントを登録しておいた要素が取得できます。

Comments

[Cocode]

コードを修正しました。

Answer 3

回答ではないですが、ご参考までに。
CSS の :has()を使えば、CSSのみで実装可能です。
下記を追加するだけです。

.imgParent:has(+ .scrollBtn:hover) .img {
  transform: scale(1.05, 1.05);
}

:has() - CSS: カスケーディングスタイルシート | MDN

ただし、現在のところ Firefox は非対応です。

HTMLを変更してもいいのなら、下記のようにscrollBtnを前に移動させて、

<div class="sectionContainer">
    <div class="scrollBtn">
    <a href="#" class="scrollBtnBefore"></a>
    <a href="#" class="scrollBtnAfter"></a>
  </div>
  <div class="imgParent">
    <img class="img" id="img1" src="http://presnt.jp/img/top/24.jpg" alt="">
  </div>
</div>

下記のCSSを追加します。

.scrollBtn:hover + .imgParent .img {
  transform: scale(1.05, 1.05);
}
.scrollBtn {
  z-index: 1;
}

これなら Firefoxでも動作します。