JS中两个相同函数之间的差距

Question

我在JavaScript中写了两个相同的函数。如您所见，对于我使用 'this' 方法的前两个框，我想创建类似 infinite 函数的东西，它将颜色从默认值切换为在每个 click.The 函数上设置，但会更改边框只有一次，而对于我的 <div id="#"></div> 标签，它工作得很好（即使你点击 100 次，它也会从默认颜色变为 'set' 颜色，这对我的前两个 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>

Answer 1

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

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';
    }
});

JS中两个相同函数之间的差距

Gapping between two of the same functions in JS

javascript

dom-events