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

Question

我尝试将带有 Eventlistener 的函数添加到带有 for 循环的一行 div 中。但是这些功能不起作用。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;
    
    
}

标签： javascripthtmlcss

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>