软件开发学徒测试页面JS功能异常求助：灰度/验证/翻译等问题

1. 灰度模式覆盖整个页面 #

你之前的代码应该只给.wireframe元素加了灰度滤镜，改成给整个页面的根元素（比如body）应用样式就行：

• 把JS里的目标元素从.wireframe换成document.body，用类切换更灵活：

// 切换灰度模式的函数
function toggleGrayscale() {
  document.body.classList.toggle('grayscale');
}

• 对应的CSS：

.grayscale {
  filter: grayscale(100%);
}

这样整个页面都会变成灰度，而不是只针对wireframe元素。

2. 姓名输入框失焦验证（避免初始粉色） #

纯CSS会导致初始就显示粉色，改成JS动态控制类：

• 先删掉CSS里给姓名输入框加的初始粉色背景样式；
• 给输入框绑定失焦事件，验证内容后添加/移除错误类：

const nameInput = document.querySelector('input[name="fullname"]');
nameInput.addEventListener('blur', () => {
  // 验证规则：不为空且至少2个字符
  const isNameValid = nameInput.value.trim().length >= 2;
  if (!isNameValid) {
    nameInput.classList.add('invalid');
  } else {
    nameInput.classList.remove('invalid');
  }
});

• CSS里定义错误类：

.invalid {
  background-color: pink;
}

这样只有失焦且内容无效时才会显示粉色，初始状态正常。

3. 多语言翻译覆盖底部文本 #

给底部未翻译的文本加data-i18n标识，然后在翻译函数里处理这些元素：

• 修改HTML里的底部文本，添加翻译标识：

<!-- 假设底部原文本是这样，加上data-i18n -->
<div class="footer-copyright" data-i18n="copyright">© 2024 版权所有</div>
<div class="footer-terms" data-i18n="terms">服务条款</div>

• 在多语言翻译对象里补充对应键值：

const langTranslations = {
  en: {
    copyright: "© 2024 All Rights Reserved",
    terms: "Terms of Service"
    // 其他翻译键...
  },
  // 其他语言...
};

• 更新切换语言的函数，遍历所有带data-i18n的元素：

function changeLanguage(lang) {
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    el.textContent = langTranslations[lang][key] || el.textContent;
  });
}

这样底部文本就会跟着语言切换更新了。

4. 支付提供商单选框排版修复 #

先取消注释HTML里的单选框代码，然后用CSS flex布局调整排版：

• 恢复单选框的HTML代码：

<div class="payment-methods">
  <label><input type="radio" name="payment" value="paypal"> PayPal</label>
  <label><input type="radio" name="payment" value="credit"> 信用卡</label>
</div>

• 添加CSS样式让排版整齐：

.payment-methods {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
}
.payment-methods label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

这样单选框会横向排列，不会出现排版混乱的问题。

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