点击锚点切换登录注册表单时jQuery未给div添加collapsed类如何解决

• 事件绑定范围过大：原代码给#form下所有a标签绑定了切换事件，包含「忘记密码」链接，会出现误触发
• 层级查找逻辑脆弱：连续三次调用.parent()完全依赖当前固定的HTML结构，只要后续调整HTML嵌套层级就会失效，可维护性极低
• 选择器冗余：$("div #register")写法冗余，id本身是全局唯一的，直接写$('#register')即可（该问题不影响功能，仅属于代码规范问题）

修复后代码 #

推荐更简洁的实现逻辑，直接切换两个表单的collapsed类，无需依赖DOM层级查找，原有CSS和HTML代码无需修改即可正常运行：

$(document).ready(function() {
    // 初始隐藏注册表单，默认显示登录表单
    $('#register').addClass('collapsed');
    
    // 仅绑定用于切换登录/注册的a标签，排除忘记密码等其他链接
    $('#form a.change').click(function(event) {
        event.preventDefault();
        // 直接切换两个表单的显隐状态，逻辑更简洁且不依赖DOM结构
        $('#register, #login').toggleClass('collapsed');
        // 保留原修改页面标题的逻辑
        document.title = $(this).attr('id');
    });
});

如果需要保留原有的父元素查找逻辑，推荐用.closest()替代多层.parent()，兼容性更强：

$(document).ready(function() {
    $('#register').addClass('collapsed');
    
    $('#form a.change').click(function(event) {
        event.preventDefault();
        // 自动向上查找最近的表单容器，不用手动数父元素层数
        const currentForm = $(this).closest('#register, #login');
        currentForm.addClass('collapsed');
        currentForm.siblings().removeClass('collapsed');
        document.title = $(this).attr('id');
    });
});

内容的提问来源于stack exchange，提问作者IronExcavater