使用JS和SVG动态添加和删除类时遇到麻烦

Question

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

我试图通过在ul-side父容器下的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和anchor元素上发生指针事件：

https://jsfiddle.net/1zt0vxm4/

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

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