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