Javascript 激活div的Onclick函数不工作

我在尝试使用活动类在渐变样例上设置编辑函数时遇到了一个小问题。当活动类在循环中设置为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);
}

演示在

---

谢谢

我想问题是你用的是

这个.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();

---

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

我认为问题在于您使用的是

这个当前的
而不是
当前的[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();

希望这工作顺利。我认为这是罪魁祸首。
如果你使用runnable，你会有更好的机会得到帮助。我可以立即发现两个问题：
let gradDiv=document.getElementById（“样例”）
将始终返回1个元素，因此下一行的for循环是不相关的。同时
current[0].className=current[0].className.add（“active”，“active”）没有意义，只需将其替换为
当前[0].classList.add（'active'）
。另外，
让当前=document.getElementsByClassName（“active”）
将在整个文档中搜索class
处于活动状态的第一个元素，而不仅仅是在
#swatch
中！如果您想确定搜索范围并仅在
#样例中查找
.active
元素，则应执行
让current=gradDiv[i].getElementsByClassName（“active”）
Yes已经做了如上所述的更改，但仍然没有控制台记录当前div。添加了演示链接也感谢您将问题隔离到一个较小的最小代码段html/js中。试图提供帮助的人没有时间浏览您网站的全部源代码：）好的，就是这样，onclick没有在当前或活动div上注册，下面这一点//将活动类添加到当前/单击的div this.classList.Add（'active'）；this.current.addEventListener（'click'，function（）{console.log（“当前Div处于活动状态”）；}）如果使用runnable，您将有更好的机会获得帮助。我可以立即发现两个问题：
let gradDiv=document.getElementById（“样例”）
将始终返回1个元素，因此下一行的for循环是不相关的。同时
current[0].className=current[0].className.add（“active”，“active”）没有意义，只需将其替换为
当前[0].classList.add（'active'）
。另外，
让当前=document.getElementsByClassName（“active”）
将在整个文档中搜索class
处于活动状态的第一个元素，而不仅仅是在
#swatch
中！如果您想确定搜索范围并仅在
#样例中查找
.active
元素，则应执行
让current=gradDiv[i].getElementsByClassName（“active”）
Yes已经做了如上所述的更改，但仍然没有控制台记录当前div。添加了演示链接也感谢您将问题隔离到一个较小的最小代码段html/js中。试图提供帮助的人没有时间浏览您网站的全部源代码：）好的，就是这样，onclick没有在当前或活动div上注册，下面这一点//将活动类添加到当前/单击的div this.classList.Add（'active'）；this.current.addEventListener（'click'，function（）{console.log（“current Div is active”）；}）是它的closer，但在单击的Div上仍然没有onlick事件，如果我从标题中的edit按钮运行函数，那么控制台中将显示几百或1000。。我无法运行editSwatch（）（它的Vue JS）我必须使用它。editSwatch（）无法使帽子工作，因此尝试了另一种方法，它工作到一定程度，这样，它们在单击时处于活动状态，仅从css获取。我在主引导行中添加了一个id“gallery”，并像这样循环查找bg渐变，它的工作原理与当鼠标悬停在图像上时它变为活动状态（从css）但仍然不会从控制台注销消息一样，在单击时获取控制台日志似乎是个问题。是的，它更接近，但在单击的div上仍然没有onlick事件，除非我从标题中的编辑按钮运行该功能，否则控制台中会出现几百或1000个。。我无法运行editSwatch（）（它的Vue JS）我必须使用它。editSwatch（）无法使帽子工作，因此尝试了另一种方法，它工作到一定程度，这样，它们在单击时处于活动状态，仅从css获取。我在主引导行中添加了一个id“gallery”，并像这样循环查找bg渐变，它的工作原理与当鼠标悬停在图像上时它变为活动状态（来自css），但仍然不会从控制台注销消息一样，在单击时获取控制台日志似乎是个问题。