Блог

Любая помощь была бы очень признательна! Я работаю над 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';
  }]
  

Для этого я бы хотел, чтобы каждое изображение, которое доступно для выбора, имело класс, такой как .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 /