JavaScript中toggleclass执行两次

Question

请问有大佬知道为什么toggleclass只执行两次吗。。
就是一开始注册下面没有下划线 通过toggleclass给注册添加类 然后有了下划线之后 再点击 下划线消失 后续操作就没用了

Answer 1

代码还蛮多问题，hasClass没有返回值正则对象，addClass中设置样式少了空格，改了下题主的逻辑，用下面的代码测试可以了。
而且题主视乎少了个功能，应该点击加样式的时候，同时移除兄弟节点的焦点样式。

有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

<style>
    .OC{font-weight:800;border-bottom:#0084ff solid;}
</style>
<span id="ZC">注册</span>
<span id="DL">登录</span>

<script>
    var ZC = document.getElementById('ZC')
    var DL = document.getElementById('DL')
    ZC.onclick = function () {
        toggleClass(ZC,'OC')
    }
    function hasClass(obj, cn) {
        var reg = new RegExp('\\b' + cn + '\\b');
        return reg.test(obj.className);
    }
    function addClass(obj, cn) {
        obj.className += ' ' + cn;//这里也少了个空格，toggleClass判断了这里就不需要再判断了
    }
    function removeClass(obj, cn) {
        var reg = new RegExp('\\b' + cn + '\\b');
        obj.className = obj.className.replace(reg, '');
    }

    function toggleClass(obj, cn) {
        if (hasClass(obj, cn)) {
            removeClass(obj, cn);
        }
        else addClass(obj, cn);
    }
</script>