时间戳

首页 > 解决方案 > 只有所选图像的边框颜色必须更改。当我单击 div 内的某些图像时，必须删除以前的图像选择

javascript - 只有所选图像的边框颜色必须更改。当我单击 div 内的某些图像时，必须删除以前的图像选择

问题描述

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

我的 HTML 代码

                  <img
                  src="{{category?.CategoryImage || 'https://giftclubimagestorage.blob.core.windows.net/images/biryani.jpg'}}"
                  class="rounded-circle"
                  alt="{{category?.CategoryTitle || ''}}" class="imgrr">

            </div>
          </div>

我的 CSS 代码

.icon:hover {

border: 2px solid red;

}
.selitem
{
  border: 20px solid blue;

}

我的 TS 代码

  [![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';
  }]

标签： javascripthtmlangulartypescriptangular8

解决方案

为此，我会让每一个可选择的图像都有一个类，例如.selectable，点击指向一个函数，例如：

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

JSFiddle 上的实时示例：https ://jsfiddle.net/36pszgxo/15/

推荐阅读