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

Question

我尝试将带有 Eventlistener 的函数添加到带有 for 循环的一行 div 中。但是这些功能不起作用。div 中没有发生任何事情。所有 div 都在 PHP 文件中定义。记者：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;}}

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>