如何修复LRT-1票价指南下拉菜单的票价显示错误？

核心问题定位 #

myFunction函数中处理目的地站点时存在变量混用，比如将始发地变量重复用于目的地取值、站点索引映射逻辑不一致，直接导致部分站点无票价显示、票价计算错误。

修复方案及代码示例 #

1. 关键修复点

• 明确区分始发地与目的地的变量，避免复用错误
• 统一站点索引规则，用站点间隔数匹配票价区间
• 增加无效站点判断，解决无结果显示问题

2. 修复后的完整函数

function myFunction() {
  // 按LRT-1实际站点顺序定义列表
  const stations = [
    "Roosevelt", "Balintawak", "Monumento", "5th Avenue", "R. Papa", "Abad Santos",
    "Blumentritt", "Tayuman", "Bambang", "Doroteo Jose", "Carriedo", "Central Terminal",
    "United Nations", "Pedro Gil", "Quirino", "Vito Cruz", "Gil Puyat", "Libertad",
    "EDSA", "Baclaran"
  ];

  // 分别获取始发地、目的地的选中值，杜绝变量混用
  const originStation = document.getElementById('origin').value;
  const destStation = document.getElementById('destination').value;

  // 获取对应站点的索引
  const originIndex = stations.indexOf(originStation);
  const destIndex = stations.indexOf(destStation);

  // 处理无效站点选择，避免无结果显示
  if (originIndex === -1 || destIndex === -1) {
    document.getElementById('fareResult').textContent = "请选择有效的始发/目的地站点";
    return;
  }

  // 计算站点间隔数（取绝对值，消除往返方向影响）
  const stationGap = Math.abs(destIndex - originIndex);

  // 匹配指定图片中的票价规则（示例规则，需替换为实际规则）
  let fare;
  if (stationGap === 0) {
    fare = 0;
  } else if (stationGap <= 3) {
    fare = 15;
  } else if (stationGap <= 6) {
    fare = 20;
  } else if (stationGap <= 10) {
    fare = 25;
  } else if (stationGap <= 15) {
    fare = 30;
  } else {
    fare = 35;
  }

  // 渲染最终票价结果
  document.getElementById('fareResult').textContent = `单程票价: ₱${fare}`;
}

适配说明 #

将代码中的票价区间判断逻辑，替换为你提供的图片中的实际规则即可完全匹配需求。

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