三类元素切换功能实现报错：代码出现SyntaxError语法错误

需要实现三类元素的切换功能：点击不同的.logins-toggle按钮时，显示对应的row类元素（row-dealer/row-portal/row-misc），隐藏其他行，并为点击的按钮添加is-active类、移除其他按钮的该类。但在添加第三个类的逻辑时，代码中var toggleClass = $(this).hasClass('toggle-dealer') ? 'toggle-dealer' : 'toggle-portal': 'toggle-misc';一行出现**uncaught SyntaxError: Unexpected token ':'**语法错误。

相关JS代码：

jQuery(document).ready(function($) {

  $('.logins-toggle').on('click', function() {

    var toggleClass = $(this).hasClass('toggle-dealer') ? 'toggle-dealer' : 'toggle-portal': 'toggle-misc';
    var rowClass = toggleClass === 'toggle-dealer' ? 'row-dealer' : 'row-portal': 'row-misc';

    // Hide all elements with "row-" class and show the corresponding one
    $('.row-dealer, .row-portal, .row-misc').each(function() {
      if ($(this).hasClass(rowClass)) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });

    // Remove or add 'is-active' class to the clicked toggle element
    $('.logins-toggle').removeClass('is-active');
    $(this).addClass('is-active');
  });

  // Automatically trigger a click on the first "logins-toggle" element
  $('.logins-toggle:first').click();
});

基础HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- 示例HTML结构待补充 -->

语法错误根源 #

三元运算符的语法为condition ? valueIfTrue : valueIfFalse，仅支持二元分支判断。你尝试直接追加第三个分支的写法不符合JavaScript语法规则，因此触发了语法错误。

修复并优化后的代码 #

以下是修复错误、同时简化逻辑的完整实现：

jQuery(document).ready(function($) {
  $('.logins-toggle').on('click', function() {
    // 确定当前点击按钮的toggle类
    let toggleClass;
    if ($(this).hasClass('toggle-dealer')) {
      toggleClass = 'toggle-dealer';
    } else if ($(this).hasClass('toggle-portal')) {
      toggleClass = 'toggle-portal';
    } else {
      toggleClass = 'toggle-misc';
    }

    // 通过字符串映射直接转换为对应的row类，减少冗余判断
    const rowClass = toggleClass.replace('toggle-', 'row-');

    // 统一隐藏所有行元素，再单独显示目标行
    $('.row-dealer, .row-portal, .row-misc').hide();
    $(`.${rowClass}`).show();

    // 切换按钮的激活状态
    $('.logins-toggle').removeClass('is-active');
    $(this).addClass('is-active');
  });

  // 默认触发第一个按钮点击，初始化显示状态
  $('.logins-toggle:first').click();
});

可直接测试的示例HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div class="logins-toggle toggle-dealer">经销商登录</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>

关键优化说明 #

• 用if/else分支替代错误的三元运算符写法，逻辑更直观，避免嵌套三元的可读性问题
• 通过字符串替换实现toggle-*到row-*的类名映射，减少重复的条件判断代码
• 简化行元素显隐逻辑：先批量隐藏所有行，再单独显示目标行，比each循环更高效
• 保留了按钮激活状态的切换逻辑，确保交互反馈清晰

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