通过.addEventListener将函数迭代到div不起作用

Question

我试图用Eventlistener将函数添加到一行带有for循环的div中。但这些功能不起作用。潜水艇里什么也没发生。所有div都在PHP文件中定义。

JS:

function chartouterdivscalemax(i) {

var a = document.getElementsByClassName('chartouterdiv');
a[i].style.transform = "scale(1.25)";

var b = document.getElementsByClassName('logocontainer');
b[i].style.transform = "scale(1.25)";
b[i].style.transform = "translate(0px, 10px)";

var c = document.getElementsByClassName('highdiv');
c[i].style.height = "70px";

var d = document.getElementsByClassName('lowdiv');
d[i].style.height = "35px";

}
function chartouterdivscalemin(i) {

var a = document.getElementsByClassName('chartouterdiv');
a[i].style.transform = "scale(1)";

var b = document.getElementsByClassName('logocontainer');
b[i].style.transform = "scale(1)";

var c = document.getElementsByClassName('highdiv');
c[i].style.height = "55px";

var d = document.getElementsByClassName('lowdiv');
d[i].style.height = "50px";

}
function iteratescalefunction() {

var elements = document.getElementsByClassName('chartouterdiv');

for (var i = 0; i <= elements.length; i++ ){

elements[i].addEventListener("mouseover", function(i){chartouterdivscalemax(i)}, false);
elements[i].addEventListener("mouseout", function(i){chartouterdivscalemin(i)}, false);
console.log(i);
}
}

CSS：

.chartouterdiv{

height:115px;
width:215px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
transform: scale(1);

}

.chartinnerdiv{

height: 105px;
width: 205px;
background-color: white;
}
.highdiv{

height: 55px;
width: 205px;
background-color: antiquewhite;
transition: 0.5s;
}
.lowdiv{

height: 50px;
width: 205p;
background-color: aqua;
display: flex;
align-items:center;
justify-content: center;
transition: 0.5s;
}
.logocontainer{

height: 50px;
width: 50px;
background-color: aquamarine;
transition: 0.5s;


}

Answer 1

您需要使用let关键字而不是var关键字来声明循环中的变量i，以避免闭包。此外，在事件侦听器.addEventListener("mouseover", function(i) {中，匿名函数不应使用变量i。在这种情况下，它是事件对象，而不是您所期望的，所以它应该只有.addEventListener("mouseover", function() {，让i从循环中使用，这里我做了一个简单的例子来证明，我正在使用我自己的HTML和CSS，以及一些JS，因为这才是

var circles = document.getElementsByClassName('circle');
function chartOuterDivScaleMax(i) {
circles[i].style.transform = "scale(1.25)";
}
function chartOuterDivScaleMin(i) {
circles[i].style.transform = "scale(1)";   
}
function iterateScaleFunction() {
for(let i = 0; i < circles.length; i++ ) {
circles[i].addEventListener("mouseover", function() {chartOuterDivScaleMax(i)}, false);
circles[i].addEventListener("mouseout", function() {chartOuterDivScaleMin(i)}, false);
}
}
iterateScaleFunction();

* {
box-sizing: border-box;
}
#circles-container {
display: flex;
}
.circle-container {
width: 52px;
height: 52px;
padding: 5px;
border-radius: 50%;
border: 1px solid red;
}
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: orange;
}

<div id="circles-container">
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
</div>

或者你可以用一种简单的方法在CSS中做同样的事情

* {
box-sizing: border-box;
}
#circles-container {
display: flex;
}
.circle-container {
width: 52px;
height: 52px;
padding: 5px;
border-radius: 50%;
border: 1px solid red;
}
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: orange;
}
.circle:hover {
transform: scale(1.25);
}

<div id="circles-container">
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
</div>