onClickイベント - 時刻が1つのイベント

Question

私は単純なjavascript関数を使用して、コンテナ内の各要素の罫線を追加しています。どのようにして1つの要素だけが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/

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