如何在JavaScript中正确使用“ For循环和事件监听器”

Question

我正在对产品页面进行一些测试。我想将鼠标悬停在每个产品上并使用JavaScript更改样式。

在我的研究中，我发现For Loop方法不是最快的方法，而且将来更容易添加更多产品。

这是我的摘录：

var pistiProductA = document.getElementsByClassName('pisti-product-a');
var pistiProductItem = document.getElementsByClassName('pisti-product-item');
var pistiProductItemLabel = document.getElementsByClassName('pisti-product-item-label');


for (i = 0; i < pistiProductA.length; i++) {
  pistiProductA[i].addEventListener("mouseover", function() {
	mouseOver(pistiProductA[i]);
  });
  
  pistiProductA[i].addEventListener("mouseout", function() {
	mouseOut(pistiProductA[i]);
  });
}

  function mouseOver() {
  	pistiProductItem[0].style.transition = '0.3s all ease';
  	pistiProductItemLabel[0].style.transition = '0.3s all ease';
	pistiProductItem[0].style.backgroundColor = '#888888';
  	pistiProductItemLabel[0].style.color = '#f7cc1b';
  	pistiProductItemLabel[0].style.fontWeight = '600';
  }
  
  function mouseOut() {
    pistiProductItem[0].style.transition = '0.3s all ease';
  	pistiProductItemLabel[0].style.transition = '0.3s all ease';
	pistiProductItem[0].style.backgroundColor = '#111111';
  	pistiProductItemLabel[0].style.color = '#000000';
  	pistiProductItemLabel[0].style.fontWeight = '400';
  }

/* CSS used here will be applied after bootstrap.css */
.pisti-product-item {
	border-radius: 6pt;
    background-color: #111111;
}
  
.pisti-product-item-label {
  color: #000;
  font-size: 14pt;
  font-weight:400;
}

.pisti-product-a:hover {
  text-decoration: none;
}

<div class="container">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <div class="row pisti-products-wrapper">
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
      	<img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
      	<p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
      	<img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
      	<p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
      	<img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
      	<p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
      	<img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
      	<p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
      	<img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
      	<p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
      	<img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
      	<p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
    <div class="col text-center pl-0">
      <a class="pisti-product-a" href="#">
      	<img class="pisti-product-item img-fluid mb-2" width="140px" height="140px" src="https://media.gogoprint.sg/catalog/category/business-card_blue_1.png" alt="">
      	<p class="pisti-product-item-label">Sticker<i class="ml-3"></i></p>
      </a>
    </div>
  </div>
</div>

我尝试将数组[0]替换为[i]。但这似乎不起作用。我还在console.log(i);中做了一个function。但是似乎i是undefined。