在使用 JS 和 SVG 动态添加和删除类时遇到问题

Question

我正在尝试创建一个互动，每次您单击图标时，都会在其下方显示绿色边框，而在最后一个图标上单击的绿色边框都会被删除。但是，当页面加载时，默认情况下，绿色边框将在第一个图标下。我想要那样。

我试图通过将"副作用"添加到UL侧父容器下的LI元素来实现此效果。由于某种原因，我的代码根本没有运行。

这是我写的JavaScript。其他相关代码可以在下面的小提琴链接中找到。const sidenavlist = document.getElementsByClassName(" ul side"([0];const navigationchildren = sidenavlist.Children;

sideNavList.addEventListener('click', function(e){
    if (e.target.classList.contains("side-item")) {
        liNavTarget=e.target;
        for (let i=0; i<navigationChildren.length; i+=1) {
            if (navigationChildren[i].classList.contains("side-effect")) {
                navigationChildren[i].classList.remove("side-effect");
                liNavTarget.classList.add("side-effect");
            }
        }
    }
});

https://jsfiddle.net/apasric4/mg2lu0no/4/

谁能帮助我更正我的代码？

Answer 1

您应该学会使用console.log()-在功能顶部称其为console.log(e.target)，您会看到单击事件在SVG元素上注册，而不是<li> s。有几种解决方法，其中之一是防止SVG上的指针事件和锚元素：

https://jsfiddle.net/1zt0vxm4/

.side-anchor {
  pointer-events: none;
}
.side-svg {
  pointer-events: none;
}