如何解决仅所选图像的边框颜色必须更改当我在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';
}]
解决方法
为此,我希望每个可选择的图像都具有诸如.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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。