本文讲解如何正确实现三个按钮类（如 toggle-dealer / toggle-portal / toggle-misc）的单选式切换逻辑，解决因误用三元运算符导致的 Unexpected token ':' 语法错误，并提供可扩展、易维护的 jQuery 解决方案。
本文讲解如何正确实现三个按钮类（如 toggle-dealer / toggle-portal / toggle-misc）的单选式切换逻辑，解决因误用三元运算符导致的 `unexpected token ':'` 语法错误，并提供可扩展、易维护的 jquery 解决方案。
在前端交互中，常需实现“多按钮单选切换”效果：点击某一按钮，显示对应内容区块（如 .row-dealer），同时隐藏其他同类区块（如 .row-portal、.row-misc），并同步更新按钮自身的激活状态（如添加 is-active 类）。初学者容易尝试用嵌套三元运算符处理三种状态，例如：
var toggleClass = $(this).hasClass('toggle-dealer') ? 'toggle-dealer' : 'toggle-portal': 'toggle-misc'; // ❌ 错误！
该写法违反 JavaScript 语法规则——三元运算符 ? : 仅支持一个条件分支和一个 else 分支，不支持“双 :”或三路分支。这正是报错 Uncaught SyntaxError: Unexpected token ':' 的根本原因。
✅ 正确做法是使用 if...else if...else 链 或更优雅的 配置驱动方式。推荐后者，因其具备高可读性、低耦合性与良好扩展性。
以下为优化后的完整实现（兼容 jQuery 3.6+）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<!-- 示例 HTML 结构 --> <div class="logins-toggle toggle-dealer is-active">经销商登录</div> <div class="logins-toggle toggle-portal">平台登录</div> <div class="logins-toggle toggle-misc">其他登录</div> <div class="row-dealer">经销商专属信息...</div> <div class="row-portal" style="display:none;">平台用户信息...</div> <div class="row-misc" style="display:none;">通用登录入口...</div>
jQuery(document).ready(function($) {
// 定义可切换的类型标识（解耦逻辑与具体类名）
const switchTypes = ['dealer', 'portal', 'misc'];
$('.logins-toggle').on('click', function() {
// 根据当前按钮含有的 toggle-* 类，推导出 type（如 'dealer'）
const type = switchTypes.find(part => $(this).hasClass(`toggle-${part}`)) || 'misc';
const toggleClass = `toggle-${type}`;
const rowClass = `row-${type}`;
// 构建统一选择器，高效控制所有目标行
const rowSelector = switchTypes.map(t => `.row-${t}`).join(', ');
// 显示匹配行，隐藏其余行
$(rowSelector).each(function() {
$(this).toggle($(this).hasClass(rowClass));
});
// 更新按钮激活状态
$('.logins-toggle').removeClass('is-active');
$(this).addClass('is-active');
});
// 初始化：自动触发首个按钮点击（确保默认视图正确）
$('.logins-toggle:first').click();
});
? 关键优势说明：
- ✅ 语义清晰：switchTypes 数组集中管理所有状态，新增类型（如 'admin'）只需扩展数组，无需修改核心逻辑；
- ✅ 健壮容错：.find() 返回 undefined 时，默认回退到 'misc'，避免运行时异常；
- ✅ 性能友好：toggle(condition) 比手动 show()/hide() 更简洁；join(', ') 动态生成选择器减少硬编码；
- ✅ 样式无关：逻辑完全基于类名约定（toggle-X ↔ row-X），与 CSS 实现解耦。
⚠️ 注意事项：
- 确保每个 .logins-toggle 元素*仅包含一个 `toggle-类**，否则find()可能匹配多个，建议添加校验（如filter(...).length === 1`）；
- 若需支持动画切换，可将 .toggle() 替换为 .fadeIn().siblings().fadeOut()；
- 在现代项目中，建议逐步迁移至原生 JavaScript（如 classList.toggle() + dataset）以减少 jQuery 依赖。
通过本方案，你不仅能彻底解决三元运算符语法错误，更能构建出面向未来、易于协作与维护的切换组件逻辑。
