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

Question

我正在尝试创建一个交互，每次你点击一个图标，一个绿色的边框就会出现在它的下方，而上次点击的图标上的绿色边框就会被移除。但是当页面加载时，默认情况下，绿色边框将位于第一个图标下。我希望是这样的。

我试图通过向ul-side父容器下的li元素添加和删除类“副作用”来实现此效果。由于某种原因，我的代码根本不能运行。

这是我写的Javascript。其他相关代码可以在下面的小提琴链接中找到。const sideNavList=document.getElementsByClassName("ul-side")；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>元素上。

https://jsfiddle.net/1zt0vxm4/

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

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