javascript - 获取 JS(mouseover，mouseleave)以在 html 文档中的图像上显示不同的文本

Question

我正在尝试让 Javascript 在有人将鼠标悬停在图像上时显示文本。我有一个由 8 张图片组成的网格，每张图片都有独特的 ID。我正在学习 JS，这就是我尝试这样做的原因。所以问题是，无论我将鼠标悬停在哪个图像上，我都只能一次显示所有文本/标题。作为初学者，我会很感激干净的 JS 中的一些指导。提前谢谢你

所以我尝试了 getElementById 和 for 循环，但如前所述，它只一次显示所有文本。我不知道如何进步。

HTML

<ul class="car-parts">
<li>
<figure>
<img id="pic-one"  src="resources/img/1.exhaust.jpg" alt="exhaust 
                                                        repairs">
  <h4 class="text-block" >exhaust repairs</h4>
</figure>
</li>  
<li>
<figure>
  <img id="pic-two" src="resources/img/2.engine.jpg" alt="engine 
                                                    diagnostics">
    <h4 class="text-block" >exhaust repairs</h4>
</figure>
</ul>

JS

var pictures = ['one','two','three','four','five','six','seven','eight'];

var x = document.querySelectorAll('.text-block');
for (var i = 0; i < pictures.length; i++) {
x[i].style.opacity = "0";

document.getElementById(                                                  
'pic-' +pictures[i]).addEventListener('mouseover',function(){    
for(var i=0; i <pictures.length; i++){
x[i].style.opacity = "1";    
x[i].style.transition = "all 0.5s ease";}
})};

Answer 1

试试这个(参见闭包、变量作用域、let 与 var)

let pictures = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];

let x = document.querySelectorAll('.text-block');
for (let i = 0; i < pictures.length; i++) {
  x[i].style.opacity = "0";

  document.getElementById(
    'pic-' + pictures[i]).addEventListener('mouseover', ()=> {
    for (let i = 0; i < pictures.length; i++) {
      x[i].style.opacity = "1";
      x[i].style.transition = "all 0.5s ease";
    }
  })
};