点击激活div的功能不起作用

Question

当我尝试使用活动类在渐变样例上设置编辑函数时，遇到了一个小问题。当活动类在循环中设置为OK时，当前活动类的后续onlick函数不会执行，下面是代码。

editSwatch() {
// Get the container element
let gradDiv = document.getElementById("swatch");
gradDiv.addEventListener("click", function () {
let current = gradDiv.getElementsByClassName("active");
// If there's no active class
if (current.length > 0) {
current[0].classList.add('active');
}
// Add the active class to the current/clicked div
this.classList.add('active');
this.current.addEventListener('click', function () {
console.log("Current Div is active");
})
});
},

Current用一个轻微的边框高亮显示，并逐个处理所有其他内容，但不会在控制台上注销消息onclick。另一个问题是，当鼠标移开时，活动的鼠标不会粘住，需要它来设置编辑和删除功能。

CSS在这里

#bg-gradient:hover,
#bg-gradient.active {
border: solid 3px rgba(84, 112, 155, 0.7);
}

演示在此处输入链接描述

感谢

Answer 1

我认为问题在于您使用的是this.current而不是current[0]。以下片段将帮助您：

function editSwatch() {
let gradDiv = document.getElementById("swatch");
console.log('clicked dev');
gradDiv.addEventListener("click", function () {        
let current = gradDiv.getElementsByClassName("active");
console.log(current);
if (current.length > 0) {
current[0].classList.add('active');
}
current[0].addEventListener('click', function () {
console.log("Current Div is active");
})
});
}
editSwatch();

希望这项工作顺利。我认为this是罪魁祸首。