javascript - onClick事件-一次仅一个事件

我有简单的javascript函数为容器内的每个元素添加边框。如何使只有一个元素可以处于onclick状态？因此，目前只有一个要素具有边界。

var fileA = document.querySelectorAll('file_a');

for ( var i = 0; i < fileA.length; i++ ) (function(i){
  fileA[i].onclick = function() {
    fileA[i].style.border = '1px solid teal';
  };
})(i);

container_a {
  background: rgb(220,220,220);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 2%;
  display: flex;
  flex-wrap: wrap;


}
file_a {
  background: rgb(245,245,245);
  box-shadow: 0px 5px 10px rgba(0,0,0,0.07);
  width: 100%;
  max-height: 100px;
  display: block;
  -webkit-transform: scale(0.98);
  transition-duration: 250ms;
}
file_a:hover {
  -webkit-transform: scale(1);
}
file_a.redclass {
  background-color: red;
}

<container_a>
  <file_a>1</file_a>
  <file_a>2</file_a>
  <file_a>3</file_a>
  <file_a>4</file_a>
</container_a>

最佳答案

您需要先删除所有边框，然后再添加新边框。有关示例，请参见此小提琴。 https://jsfiddle.net/e79puv91/

var fileA = document.querySelectorAll('file_a');

for ( var i = 0; i < fileA.length; i++ ) (function(i){
  fileA[i].onclick = function() {
    for (var x = 0; x < fileA.length; ++x) {
      fileA[x].style.border = '';
    }
    fileA[i].style.border = '1px solid teal';
  };
})(i);