getElementsByClassName 但只操作我想要的那个

Question

i have multiple div with same classname but i want to change only one of their opacity, the one that i interact with a mouse or touch. How can i do it? The below code changing all of theirs properties, apparently. Full.js code is here if anyone would like to take a look at: 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

Based on your fiddle, change document.getElementsByClassName to evt.target.getElementsByClassName and get rid of the loop.

Target lets you reference only the element that is the target of the event.

Answer 2

Your JS is looping through all elements with either of those two class names and applying opacity. What you can do is make use of the mouse events target property, which will give you the specific element which has been interacted with, and apply the opacity to that.

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

You can see a full working example here .