在 JS 中的两个相同函数之间切换

Gapping between two of the same functions in JS

本文关键字：函数 之间 两个 JS      更新时间：2023-09-26

我在JavaScript中编写了两个相同的函数。如您所见，对于前两个框，我使用了"this"方法，我想创建类似无限函数的东西，它将颜色从默认值切换到每次单击时设置。该函数有效，但只更改一次边框，而对于我的 <div id="#"></div> 标签，它工作得很好(如果你点击 100 次，它会从默认颜色变为"设置"颜色，这对我的前两个div 不起作用与类(。这种差距是由什么造成的？

document.addEventListener("DOMContentLoaded", function() {
  var elements = document.getElementsByClassName('bro');
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      for (var i = 0; i < elements.length; i++) {
        if (this.style.border == '15px solid lime') {
          this.style.border = '15px solid black';
        } else {
          this.style.border = '15px solid lime';
        }
      }
    });
  }
  /*scripting the div*/
  var first = document.getElementById('firstEL');
  first.addEventListener('click', function() {
    if (first.style.border == '10px solid mediumorchid') {
      first.style.border = '10px outset red';
    } else {
      first.style.border = '10px solid mediumorchid';
    }

  });
});
    .bro {
      width: 220px;
      height: 200px;
      border: 15px solid lime;
      background-color: purple;
      display: inline-block;
      margin: 10px;
    }
    #firstEL {
      width: 200px;
      height: 200px;
      border: 10px solid mediumorchid;
      display: inline-block;
      background-color: darkblue;
    }
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Wilkomen</title>
  <script src="https://code.jquery.com/jquery-1.12.0.js"></script>
  <script src="js/main.js"></script>
  <!-- css -->
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="bro"></div>
  <div class="bro"></div>
  <br>
  <!----- id ---->
  <div id="firstEL"></div>
</body>
</html>

问题出在点击事件侦听器中：

elements[i].addEventListener('click',function() {
    for (var i = 0 ; i < elements.length ; i++) {
        if (this.style.border == '15px solid lime') {
            this.style.border = '15px solid black';
        } else {
            this.style.border = '15px solid lime';
        }
    }
});

如果您单击其中一个div，则会遍历所有div 并切换颜色。结果，您将颜色切换两次：黑色到石灰再到黑色。

我建议删除for或事件最好使用event.target属性：

elements[i].addEventListener('click', function (e) {
    if(e.target.style.border == '15px solid lime') {
        e.target.style.border = '15px solid black';
    } else {
        e.target.style.border = '15px solid lime';
    }
});
相关文章：