Javascript 只有选定图像的边框颜色必须更改。当我点击div中的某个图像时，必须删除之前的图像选择

任何帮助都将不胜感激！我在研究Angular8。为了获得进一步的帮助，我还观看了一张图片，您可以看到在我单击的任何一张图片上都选择了所有的div。而不是从上一个图像中删除边框效果并仅在选定的div上显示

我的HTML代码

.icon:hover {

border: 2px solid red;

}
.selitem
{
  border: 20px solid blue;

}

  [![public sel(event): void {
    const divs = document.getElementById('container').getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
      if (divs\[i\] !== event.target) {
        divs\[i\].className = 'icon';
      }
    }
    event.target.className = 'selitem';
  }]

我的TS代码

.icon:hover {

border: 2px solid red;

}
.selitem
{
  border: 20px solid blue;

}

  [![public sel(event): void {
    const divs = document.getElementById('container').getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
      if (divs\[i\] !== event.target) {
        divs\[i\].className = 'icon';
      }
    }
    event.target.className = 'selitem';
  }]

[！[公共选择（事件）：无效{
const divs=document.getElementById（'container'）.getElementsByTagName（'div'）；
for（设i=0；i

为此，我希望每个可选择的图像都有一个类，例如

。可选择的

，然后单击指向一个函数，例如：

function clickHandler(element) { 
  // Get currently selected element(s)
  const old = document.getElementsByClassName("selectable"); 
  
  for (i = 0; i < old.length; i++) {
    // Remove current selected class
    console.log(old[i].classList.remove("selected"));
    } 
  // On element that called the function add selected class
  element.classList.add("selected");
}

函数clickHandler（元素）{
//获取当前选定的元素
const old=document.getElementsByClassName（“可选”）；
对于（i=0；i

---

JSFIDLE上的实时示例：

我尝试了它，但给出了错误“error TypeError:无法读取组件上未定义的属性'add'。单击处理程序”在我的示例中，我使用

this

从html调用函数，如

，以传递对从中调用该函数的元素的引用。如果从其他地方调用处理程序，则需要确保将该元素作为参数传递