Question

我的foreach循环有问题。使用foreach循环的书面代码不起作用，但如果我使用for循环，一切都按预期工作。我在网上寻找解决方案几个小时，什么也没有。我举两个例子。第一个例子是使用foreach循环，第二个例子是用于循环。对不起，但我的英语不是最好的。

示例 - foreach循环（已损坏）：

window.onload = () => {
  test();
};


function test() {
  let testDiv = Array.from(document.getElementsByClassName("test"));
  let currentTest = testDiv[0];
  currentTest.className += " test2";
   testDiv.forEach((current) => {
    current.addEventListener('mousemove', () => {
      currentTest.className = currentTest.className.replace("test2", "");
      currentTest = this;
      currentTest.className += " test2";
    });
  }); 
}

.test {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/script.js" async></script>  
    </head>
    <body>     
        <div>
		  <div class="test">1</div>
		  <div class="test">2</div>
		  <div class="test">3</div>
		  <div class="test">4</div>
		  <div class="test">5</div>
		</div>   
    </body>
</html>

示例 - for循环（工作正常）：

window.onload = () => {
  test();
};


function test() {
  let testDiv = Array.from(document.getElementsByClassName("test"));
  let currentTest = testDiv[0];
  currentTest.className += " test2";
  for (var i = 0; i < testDiv.length; i++) {
	  testDiv[i].onmouseover = function() {
		  currentTest.className = currentTest.className.replace("test2", "");
		  currentTest = this;
		  currentTest.className += " test2";
	  };
  }
}

.test {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/script.js" async></script>  
    </head>
    <body>     
        <div>
		  <div class="test">1</div>
		  <div class="test">2</div>
		  <div class="test">3</div>
		  <div class="test">4</div>
		  <div class="test">5</div>
		</div>   
    </body>
</html>

Answer 1

该问题与for与forEach无关，而与function与=>函数无关。

//                                    vvvvv
current.addEventListener('mousemove', () => {
  currentTest.className = currentTest.className.replace("test2", "");
  currentTest = this;
//              ^^^^

this没有您期望的值，因为您使用了箭头函数，该函数将this与周围的上下文绑定（而不是从mousemove事件中传递它）

要解决此问题，请改为：

current.addEventListener('mousemove', function () {
  currentTest.className = currentTest.className.replace("test2", "");
  currentTest = this;

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this。

Answer 2

这是因为您使用的this不是current元素。

您需要将currentTest设置为current，如下所示：

window.onload = () => {
  test();
};


function test() {
  let testDiv = Array.from(document.getElementsByClassName("test"));
  let currentTest = testDiv[0];
  currentTest.className += " test2";
   testDiv.forEach((current) => {
    current.addEventListener('mousemove', () => {
      currentTest.className = currentTest.className.replace("test2", "");
      currentTest = current;
      currentTest.className += " test2";
    });
  }); 
}

.test {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
}

.test2 {
  color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/script.js" async></script>  
    </head>
    <body>     
        <div>
		  <div class="test">1</div>
		  <div class="test">2</div>
		  <div class="test">3</div>
		  <div class="test">4</div>
		  <div class="test">5</div>
		</div>   
    </body>
</html>

Javascript - 不适用于foreach循环

2 个答案: