点击同class下拉按钮时全部下拉框展开的问题排查

问题根源 #

• 原代码在点击事件中遍历所有.tft97元素执行状态切换，导致点击任意按钮都会触发全部下拉框的显示/隐藏。
• 最初使用map[i]时，由于var的函数作用域特性，点击事件触发时i已变为循环结束后的最大值，会出现无法定位目标元素的情况；改为j后又因遍历全部元素，导致所有下拉框同步切换。

修复方案 #

核心思路是让每个按钮仅操作其所属容器内的下拉元素，而非全局所有下拉组件，以下是两种可行方案：

方案一：基于DOM层级定位（推荐） #

利用按钮与下拉组件的父子容器关系，精准定位目标元素：

var chooseBtn = document.getElementsByClassName("route-choose");
for (var i = 0; i < chooseBtn.length; i++) {
  chooseBtn[i].addEventListener("click", function() {
    // 找到当前按钮所在的.route-option父容器，再获取内部的.tft97元素
    var targetDropdown = this.closest('.route-option').querySelector('.tft97');
    targetDropdown.classList.toggle("hide");
  });
}

• this：指向当前被点击的按钮元素
• closest('.route-option')：向上查找最近的.route-option父容器，确保范围限定在当前组件内
• querySelector('.tft97')：在目标容器内获取对应的下拉元素，避免影响其他组件

方案二：用let绑定循环作用域 #

通过let为每个循环迭代创建独立作用域，确保索引与对应元素匹配：

var chooseBtn = document.getElementsByClassName("route-choose");
var dropdownList = document.getElementsByClassName("tft97");
// 提前获取所有下拉元素，避免重复DOM查询
for (let i = 0; i < chooseBtn.length; i++) {
  chooseBtn[i].addEventListener("click", function() {
    dropdownList[i].classList.toggle("hide");
  });
}

注意：此方案要求.route-choose和.tft97的数量、顺序完全对应，否则会出现匹配错误，优先推荐方案一。

内容的提问来源于stack exchange，提问作者trường vũ thế