使用 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;
}