getElementsByClassName, но манипулирую только тем, который мне нужен

Question

У меня есть несколько div с тем же именем класса, но я хочу изменить только одну из их непрозрачности, ту, с которой я взаимодействую с помощью мыши или касания. Как мне это сделать? Приведенный ниже код, по-видимому, меняет все их свойства. Полный. js код здесь, если кто хочет взглянуть на: https://jsfiddle.net/b7y6mfv4/

var target1 = document.getElementsByClassName('beforeLabel');
var target2 = document.getElementsByClassName('afterLabel');

        for (var i=0; i<target1.length; i++) {
    target1[i].style.opacity = beforeAfter;
    target2[i].style.opacity = beforeAfter2;
}

Answer 1

Ваш JS перебирает все элементы с любым из этих двух имен классов и применяет прозрачность. Что вы можете сделать, так это использовать свойство target событий мыши, которое предоставит вам конкретный c элемент, с которым взаимодействовали, и применит к нему непрозрачность.

document.addEventListener('mouseover', (event) => {
  if (event.target.className.includes("beforeLabel")) {
    event.target.style.opacity = 0.5;
  }
});

Вы можете увидеть полный рабочий пример здесь .

Answer 2

В зависимости от вашей скрипки измените document.getElementsByClassName на evt.target.getElementsByClassName и избавьтесь от l oop.

Target позволяет ссылаться только на элемент, являющийся целью события.