前端求助：.hidden类仅在一个切换区块生效问题排查

我正在完成Frontend Mentor的新闻通讯订阅页开发，将注册页与成功提示分别包裹在<main>标签下的独立div中，定义.hidden类（display: none）并编写toggle函数，实现点击订阅按钮或关闭按钮时切换两个区块的显示状态。目前仅成功提示能正常切换显示/隐藏，注册页虽在开发者工具中显示已添加.hidden类，但仍始终可见。

相关代码 #

HTML结构

<div class="signup-pg" id="signup-page">
      <div class="col col-img">
        <picture class="layout-img">
          <source srcset="./assets/images/illustration-sign-up-desktop.svg" media="(min-width: 770px)">
          <img src="./assets/images/illustration-sign-up-mobile.svg" alt="">
        </picture>
      </div>
      <div class="col col-content">
  
        <h1>Stay updated!</h1>
        <p class="lead">
          Join 60,000+ product managers receiving monthly updates on:
        </p>
        <ul role="list">
          <li>
            <span class="list-icon"><img src="./assets/images/icon-list.svg" alt=""></span>
            <p class="list-item">
            Product discovery and building what matters
            </p>
          </li>
          <li>
            <span class="list-icon"><img src="./assets/images/icon-list.svg" alt=""></span>
            <p class="list-item">
              Measuring to ensure updates are a success
            </p>
          </li>
          <li>
            <span class="list-icon"><img src="./assets/images/icon-list.svg" alt=""></span>
            <p class="list-item">
              And much more!
            </p>
          </li>
        </ul>
      
      <!-- Sign-up form start -->
      <form action="/success.html" id="signup-form">
        <fieldset>
          <legend>Email address</legend>
          <label for="mail">
            <input class="email-input" type="email" id="email" name="usermail" placeholder="email@company.com" required>
            <p class="error-message hidden">Valid email required</p>
            <button class="btn" type="submit" id="submitBtn" >Subscribe to monthly newsletter</button>
            
          </label>
        </fieldset>
      </form>
    </div>
  </div>

CSS代码

.hidden {
  display: none;
}

JavaScript代码

const signupForm = document.getElementById('signup-form');
const userEmail = document.getElementById('user-email');
const signUpPage = document.getElementById('signup-page');
const successPage = document.getElementById('success-pg');
const dismiss = document.getElementById('dismiss')

function updateSuccessMsg(email) {
    userEmail.textContent = email;
}

function toggleMainAndSuccess() {
    signUpPage.classList.toggle('hidden');
    successPage.classList.toggle('hidden');
}

function isValidEntry(str) {
    const reg = new RegExp('[a-z0-9]+@[a-z]+.[a-z]{2,3}');
    return reg.test(str);
  }

function showErrors() {
    const errorMsg = document.getElementById('error-message');
    const input = document.getElementById('email');
    errorMsg.classList.remove('hidden');
    input.classList.add('error');
}

signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = signupForm.querySelector('#email')
    const valid = isValidEntry(email.value);
    if (!valid) {
        return showErrors();
    }
    else if (valid) {
        updateSuccessMsg(email.value);
        toggleMainAndSuccess();
    }
});

dismiss.addEventListener('click', () => {
    toggleMainAndSuccess();
    updateSuccessMsg('');
})

排查与修复方案 #

1. CSS优先级冲突
   大概率是其他CSS规则的优先级高于.hidden，比如注册页的.signup-pg可能被定义了display: flex/grid等布局属性，且选择器权重与.hidden相同或更高，导致display: none被覆盖。

   • 修复方式：提升.hidden的优先级，比如：

     #signup-page.hidden {
       display: none;
     }
     

     或者使用!important（仅在无其他方案时使用）：

     .hidden {
       display: none !important;
     }
     

2. DOM结构与布局问题
   检查注册页div是否被父元素的特殊布局影响，比如父元素使用display: contents，会导致子元素的display: none不生效；或者成功提示页与注册页存在布局重叠，视觉上误以为注册页未隐藏。

3. JavaScript元素获取验证
   在toggleMainAndSuccess函数中添加日志，确认元素是否正确获取：

   function toggleMainAndSuccess() {
       console.log('注册页元素:', signUpPage);
       console.log('当前类列表:', signUpPage.classList);
       signUpPage.classList.toggle('hidden');
       successPage.classList.toggle('hidden');
   }
   

4. 浏览器缓存问题
   强制刷新页面（Ctrl+F5），清除浏览器缓存，确保最新的CSS和JS代码生效。

额外优化点 #

• 邮箱验证正则可更严谨：

  function isValidEntry(str) {
      const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return reg.test(str);
  }
  

• showErrors函数中错误提示元素获取有误，HTML中错误提示的class是error-message，需修改为：

  const errorMsg = document.querySelector('.error-message');
  

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