onClick事件 - 一次只有一个事件

Question

我有简单的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>

Answer 1

在添加新边框之前，您需要删除所有边框。看一下这个小提琴的例子。 https://jsfiddle.net/e79puv91/

{{1}}