JavaScript基于带索引ID实现div显隐切换的状态判断与互斥关闭问题求助

• 模板事件绑定语法错误：按钮写法<button appointmentToggle(doctor,'video',i)">video</button>缺少事件绑定的括号标识，实际点击时根本无法触发组件内的appointmentToggle方法
• toggle()方法的固有问题：jQuery的toggle()会对目标元素的当前显隐状态做无差别反转，不管原本是打开还是关闭，执行后都会变成相反状态，这就是已关闭面板被误打开的直接原因
• 选择器匹配错误：模板中视频问诊面板的id为videoappointmentShow{{i}}，但代码中jQuery选择器写的是#appointmentShow{{i}}，完全匹配不到对应DOM节点，会导致元素状态错位
• 状态和DOM完全脱节：没有独立的状态存储层，所有显隐状态完全依赖DOM的当前渲染结果，一旦DOM被其他逻辑改动，组件内的判断逻辑就会失效
• 全局状态缺失：没有统一记录当前打开的面板位置，切换其他按钮时只能盲目调用toggle，无法做到“打开新面板时自动关闭旧面板”的预期效果

方案一（推荐）：用Angular原生状态管理替代DOM操作 #

完全摒弃jQuery操作DOM的写法，通过组件内变量记录状态，交给Angular的变更检测机制控制显隐，从根源避免状态不同步的问题。

1. 组件类中新增两个状态变量，替代原来零散的单index判断：
   • currentOpenRow: number | null = null：记录当前展开面板对应的列表行索引
   • currentOpenType: 'video' | 'clinic' | null = null：记录当前展开的面板类型
2. 修正模板的事件绑定，替换硬编码id的div为状态绑定的显隐控制：

   <div class="row" *ngFor="let doctor of doctordata;let i=index">
     <button (click)="appointmentToggle(doctor,'video',i)">video</button>
     <button (click)="appointmentToggle(doctor,'clinic',i)">In-clinic</button>
     <div class="row" id="clinicShow{{i}}">
       <button (click)="clinicdetails(i)">clinicName</button>
     </div>
     <!-- 视频问诊面板 -->
     <div class="col-lg-12 col-sm-12" *ngIf="currentOpenRow === i && currentOpenType === 'video'">
        videocalendertimeslot
     </div>
     <!-- 到院问诊面板 -->
     <div class="col-lg-12 col-sm-12" *ngIf="currentOpenRow === i && currentOpenType === 'clinic'">
        Incliniccalendertimeslot
     </div>
   </div>
   

3. 重写切换逻辑：

   currentOpenRow: number | null = null;
   currentOpenType: 'video' | 'clinic' | null = null;
   
   appointmentToggle(doctor: any, type: 'video' | 'clinic', rowIndex: number) {
     // 如果点击的是当前已经打开的面板，直接清空状态关闭面板
     if (this.currentOpenRow === rowIndex && this.currentOpenType === type) {
       this.currentOpenRow = null;
       this.currentOpenType = null;
       return;
     }
     // 更新状态为当前点击的行和面板，原来打开的面板会因状态不匹配自动关闭，无需额外操作
     this.currentOpenRow = rowIndex;
     this.currentOpenType = type;
   }
   

方案二（临时适配原jQuery写法） #

如果暂时无法重构状态逻辑，至少要把盲目的toggle()换成带状态判断的显隐控制：

• 先修正所有jQuery选择器的id，和模板里的DOM id完全对齐
• 调用显隐方法前先判断元素的当前可见状态，只做符合预期的状态变更，不盲目反转：

  appointmentToggle(doctor: any, type: 'video' | 'clinic', rowIndex: number) {
    // 先获取当前行的两个面板元素
    const $videoPanel = $(`#videoappointmentShow${rowIndex}`);
    const $clinicPanel = $(`#inclinicappointmentShow${rowIndex}`);
    // 关闭所有其他行的已打开面板
    $(`[id^="videoappointmentShow"]`).not($videoPanel).hide();
    $(`[id^="inclinicappointmentShow"]`).not($clinicPanel).hide();
  
    if (type === 'video') {
      $clinicPanel.hide();
      $videoPanel.is(':visible') ? $videoPanel.hide() : $videoPanel.show();
    }
    if (type === 'clinic') {
      $videoPanel.hide();
      $clinicPanel.is(':visible') ? $clinicPanel.hide() : $clinicPanel.show();
    }
  }
  

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