根据输入框值显示/隐藏内容：如何将多段JS脚本合并简化？

架构老林

2026-7-5

整合多段JS脚本实现国家区域显示/隐藏功能

需求说明

原本使用三段独立JS脚本，实现根据id为country的数字输入框的值，显示或隐藏对应US、DE、IT的div元素，现在需要将这些功能整合到单个脚本中简化代码。

整合后的实现方案

核心思路

把输入框的数字值与对应国家的DOM元素做映射，通过一个统一的处理函数完成显示/隐藏逻辑，只绑定一次事件监听，彻底消除重复代码。

完整代码示例

HTML结构（参考）

<input type="number" id="country" min="1" max="3" value="1">
<div id="US">美国区域内容</div>
<div id="DE" style="display: none;">德国区域内容</div>
<div id="IT" style="display: none;">意大利区域内容</div>

整合后的JS脚本

// 建立数字值与对应国家元素的映射关系
const countryElementMap = {
  1: document.getElementById('US'),
  2: document.getElementById('DE'),
  3: document.getElementById('IT')
};

// 获取数字输入框元素
const countryInput = document.getElementById('country');

// 统一处理显示/隐藏的函数
function handleCountryDisplay() {
  // 先隐藏所有国家对应的div
  Object.values(countryElementMap).forEach(div => {
    div.style.display = 'none';
  });

  // 获取当前输入的有效数字值
  const selectedNum = parseInt(countryInput.value, 10);
  // 如果存在对应元素，则显示它
  if (countryElementMap[selectedNum]) {
    countryElementMap[selectedNum].style.display = 'block';
  }
}

// 绑定输入事件（实时响应输入变化）
countryInput.addEventListener('input', handleCountryDisplay);
// 页面初始化时执行一次，确保初始状态正确
handleCountryDisplay();