Question

我在javascript中编写了两个相同的函数。正如你所看到的，对于我使用'this'方法的前2个框，我想创建类似无限函数的东西，它将颜色从默认切换到每次点击时设置。该功能有效但只改变边框一次，而对于我的<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

问题出在click事件监听器中：

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中使用两个相同的函数

1 个答案: