点击切换输入框值功能失效问题排查请求

看起来你这个用来切换左右输入框值的箭头按钮罢工了，我结合你给出的部分HTML代码，梳理几个最常见的问题点和修复思路：

1. 点击事件绑定是否正确 #

首先得确认箭头按钮的JavaScript事件有没有绑定到位：

• 如果是静态渲染的按钮，检查选择器是否写错，比如按钮的类名/ID有没有匹配：

  // 原生JS示例（假设按钮类是.flight-swap-btn）
  const swapBtn = document.querySelector('.flight-swap-btn');
  if (swapBtn) {
    swapBtn.addEventListener('click', swapFlightInputs);
  } else {
    console.error("找不到切换按钮元素！");
  }
  

• 如果按钮是动态生成的（比如通过AJAX加载），必须用事件委托来绑定，不然绑定会失效：

  // 原生JS事件委托写法
  document.addEventListener('click', function(e) {
    if (e.target.closest('.flight-swap-btn')) {
      swapFlightInputs();
    }
  });
  

2. 输入框选择器与值交换逻辑 #

从你的HTML来看，左侧输入框ID是search_legs_0_origin_text，对应的隐藏域是search_legs_0_origin_id，右侧目的地输入框应该是类似search_legs_0_destination_text和search_legs_0_destination_id的结构。交换时要同时处理可见输入框和隐藏域的内容，不然表单提交会出错：

function swapFlightInputs() {
  // 获取两个可见输入框
  const originInput = document.getElementById('search_legs_0_origin_text');
  const destInput = document.getElementById('search_legs_0_destination_text');
  // 获取对应的隐藏域（存储机场ID）
  const originIdInput = document.getElementById('search_legs_0_origin_id');
  const destIdInput = document.getElementById('search_legs_0_destination_id');

  // 先检查元素是否存在
  if (!originInput || !destInput || !originIdInput || !destIdInput) {
    console.error("缺少必要的输入框元素，请检查ID是否正确！");
    return;
  }

  // 交换可见输入框的值
  const tempText = originInput.value;
  originInput.value = destInput.value;
  destInput.value = tempText;

  // 交换隐藏域的ID值
  const tempId = originIdInput.value;
  originIdInput.value = destIdInput.value;
  destIdInput.value = tempId;
}

3. 自动补全插件的冲突问题 #

你的输入框有airport_field类和data-source属性，看起来是集成了机场自动补全插件（比如自定义组件或第三方库）。这类插件通常会隐藏原生输入框，用自定义DOM替代，直接修改原生输入框的值可能不会同步到插件的显示内容。

这种情况下需要调用插件的API来更新值，比如：

// 假设插件提供了update方法（具体以插件文档为准）
originInput.value = destInput.value;
$(originInput).airportField('update', destInput.value);
destInput.value = tempText;
$(destInput).airportField('update', tempText);

4. 按钮默认行为的干扰 #

如果你的切换按钮是<button>标签，点击时会默认触发表单提交，导致页面刷新，看起来像是功能失效。这时候需要阻止默认行为：

swapBtn.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止按钮默认提交行为
  swapFlightInputs();
});

快速排查技巧 #

• 打开浏览器控制台（F12），点击按钮时查看是否有报错信息，报错内容会直接指向问题根源；
• 把完整的箭头按钮HTML代码和对应的JavaScript代码贴出来，能更精准定位问题。

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