本文详解如何使用 jquery 在 trivia 小测验中实现：点击任一答案按钮后立即禁用所有按钮，同时根据正确性将正确答案设为绿色、错误答案设为红色，并动态更新文本提示。
本文详解如何使用 jquery 在 trivia 小测验中实现：点击任一答案按钮后立即禁用所有按钮，同时根据正确性将正确答案设为绿色、错误答案设为红色，并动态更新文本提示。
在构建交互式小测验（如 CSS 基础问答）时，良好的用户体验要求：仅允许一次作答、即时反馈对错、视觉清晰区分结果。jQuery 是实现该逻辑的简洁方案——无需原生 DOM API 手动遍历，一行选择器即可批量操作。
以下为完整、可直接运行的 jQuery 解决方案（基于你提供的 HTML 结构）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 核心逻辑说明
- 使用事件委托（绑定到 .answer-btns 容器），避免为每个按钮重复绑定；
- 点击后：禁用全部按钮 → 识别正确答案（.btn-valid） → 差异化样式与文本更新；
- 严格遵循“只允许一次作答”原则，防止重复点击干扰状态。
? 完整 jQuery 代码（含注释）
$(document).ready(function() {
// 事件委托：监听 .answer-btns 内所有 button 的点击
$('.answer-btns').on('click', 'button', function() {
const $clickedBtn = $(this);
const $allButtons = $('.answer-btns button');
// 1. 立即禁用所有按钮（防止重复点击）
$allButtons.prop('disabled', true);
// 2. 判断点击项是否为正确答案（依据 class="btn-valid"）
if ($clickedBtn.hasClass('btn-valid')) {
// 正确：绿色背景 + 显示 "Correct!"
$clickedBtn.css('background-color', '#4CAF50').text('✓ Correct!');
// 其他按钮设为浅灰（非错误态，仅表示已禁用）
$allButtons.not($clickedBtn).css('background-color', '#e0e0e0');
} else {
// 错误：红色背景 + 显示 "Incorrect"
$clickedBtn.css('background-color', '#f44336').text('✗ Incorrect');
// 同时高亮唯一正确答案（绿色），其他错误项保持默认灰底
const $correctBtn = $('.answer-btns .btn-valid');
$correctBtn.css('background-color', '#4CAF50').text('✓ Correct!');
// 可选：为错误按钮添加轻微抖动效果增强反馈（需 CSS 支持）
$clickedBtn.addClass('shake');
}
});
});
? 配套 CSS 建议（提升体验）
/* 按钮基础样式 */
.btn, .btn-valid {
margin: 8px 4px;
padding: 10px 16px;
border: none;
border-radius: 4px;
background-color: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
}
/* 禁用状态统一灰阶 */
.btn:disabled, .btn-valid:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* 错误点击抖动动画（可选） */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
50% { transform: translateX(3px); }
75% { transform: translateX(-3px); }
}
.shake {
animation: shake 0.5s ease-in-out;
}
⚠️ 关键注意事项
- ID 唯一性问题：你 HTML 中多个
- 语义化建议：如需支持键盘导航或无障碍访问，推荐进阶方案——用 +
- 扩展性设计：若页面含多道题（如 #q2, #q3），可将选择器泛化为 $('.question1 .answer-btns') 或添加 data-question-id 属性，实现批量初始化。
✅ 总结
本方案以最少代码达成三大目标：防重复提交（禁用全部）、精准反馈（红/绿区分）、即时响应（文本更新）。它结构清晰、兼容性强，是 jQuery 小测验交互的经典实践。下一步可结合计分逻辑或自动跳转下一题，让 trivia 游戏更完整。
