如何用jQuery实现酒店风扇档位按钮互斥单选切换效果

问题描述 #

开发酒店客房风扇控制功能时，设置4个按钮分别对应不同风速档位，要求实现单选互斥逻辑：用户点击任意档位按钮时，其余档位按钮自动切换为关闭状态，同一时间仅允许一个档位激活。
原有基于jQuery实现的代码存在逻辑缺陷，4个按钮可同时点击激活，不符合业务要求。原有代码为每个按钮单独绑定点击事件，点击后通过$.ajax()发起POST请求提交设备控制参数，原代码如下：

$("#wentAOnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1175", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });

    $("#went1OnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1176", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });
    $("#went2OnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1177", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });
    $("#went3OnOff").click(function() {
        $.ajax({
            url:'do',
            type:'POST',
            data: {
                actions:[
                    {action: "set", what: "mbt", id: "1178", val: 1},
                    {action: "set", what: "mbt", id: "1062", val: 1},
                ]
            },
            success: function(res) {
            },
            error : function() {
            }
        });
    });

修复思路 #

原有代码的核心问题是重复逻辑多、没有做状态互斥处理：点击按钮时只提交了当前档位的开启参数，既没有通知设备关闭其他档位，也没有在前端UI层更新其他按钮的状态，导致多档位可同时激活。
优化逻辑如下：

• 抽离4个档位的重复配置，统一绑定事件，减少冗余代码
• 点击按钮时先判断是否为当前已激活档位，避免重复发请求
• 组装请求参数时，当前档位传开启值val:1，其余所有档位传关闭值val:0，保证设备端状态互斥
• 接口请求成功后再更新UI状态：移除所有按钮的激活样式，仅给当前点击按钮加激活态，避免请求失败时UI和实际设备状态不一致

优化后完整代码 #

首先给4个档位按钮加上统一类名fan-speed-btn（直接在原有html的按钮标签上加class即可，不用改原有id），然后替换原有js逻辑：

// 档位按钮ID与设备控制ID映射关系
const fanSpeedMap = {
  wentAOnOff: '1175',
  went1OnOff: '1176',
  went2OnOff: '1177',
  went3OnOff: '1178'
};
const FAN_POWER_CTRL_ID = '1062';

// 统一绑定所有档位按钮点击事件
$('.fan-speed-btn').on('click', function() {
  const $current = $(this);
  const currentId = $current.attr('id');

  // 已激活的档位重复点击不触发请求
  if ($current.hasClass('active')) return;

  // 组装控制参数：当前档位开，其余档位关
  const actions = Object.entries(fanSpeedMap).map(([btnId, devId]) => ({
    action: 'set',
    what: 'mbt',
    id: devId,
    val: btnId === currentId ? 1 : 0
  }));
  // 加入风扇电源开启参数
  actions.push({
    action: 'set',
    what: 'mbt',
    id: FAN_POWER_CTRL_ID,
    val: 1
  });

  $.ajax({
    url: 'do',
    type: 'POST',
    data: { actions },
    success(res) {
      // 请求成功再更新UI状态，保证和设备实际状态一致
      $('.fan-speed-btn').removeClass('active');
      $current.addClass('active');
      // 可自行补充激活态样式，比如修改按钮颜色、切换高亮图标等
    },
    error() {
      // 可自行补充错误提示，比如console.log('档位切换失败，请重试')
    }
  });
});

补充说明：如果对接的设备后端本身已经做了档位互斥处理，不需要前端传其他档位的关闭参数，可以只保留当前档位的开启参数，但前端UI层的互斥状态更新必须保留，保证用户交互符合单选逻辑。如果需要增加风扇关机功能，额外增加关机按钮即可，点击时给所有档位传val:0、电源控制id传val:0，同时移除所有档位按钮的active类。

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