JS/jQuery新手求助：简化选中选项显示图片的冗长代码

嘿，作为新手能写出实现功能的代码已经超棒啦！咱们来把这段冗长的代码变得更简洁、更好维护～

首先，先补全一下你没写完的HTML结构（假设是这样的，要是和你的实际情况有出入，调整一下就行）：

<div class="form-group">
  <label>Ik ben op zoek naar een:</label>
  <select name="inputType" form="carform" class="form-control" id="inputType" title="inputType" required>
    <option disabled selected value>Selecteer een optie</option>
    <option value="auto">Auto</option>
    <option value="motor">Motor</option>
    <option value="fiets">Fiets</option>
  </select>
</div>
<!-- 图片容器 -->
<div class="image-container">
  <img id="auto-img" src="auto.jpg" style="display:none;" alt="Auto">
  <img id="motor-img" src="motor.jpg" style="display:none;" alt="Motor">
  <img id="fiets-img" src="fiets.jpg" style="display:none;" alt="Fiets">
</div>

原来的冗长代码（我猜你大概是这么写的） #

大概率你写了一堆if-else或者switch来判断每个选项，比如：

$('#inputType').change(function() {
  var selected = $(this).val();
  if (selected === 'auto') {
    $('#auto-img').show();
    $('#motor-img').hide();
    $('#fiets-img').hide();
  } else if (selected === 'motor') {
    $('#motor-img').show();
    $('#auto-img').hide();
    $('#fiets-img').hide();
  } else if (selected === 'fiets') {
    $('#fiets-img').show();
    $('#auto-img').hide();
    $('#motor-img').hide();
  } else {
    $('.image-container img').hide();
  }
});

简化方案1：用映射对象分离配置和逻辑 #

把选项值和对应图片的关联单独存成一个对象，这样以后加新选项只需要加一行配置，不用改逻辑：

// 定义选项与图片的映射，新增选项直接在这里加就行
const optionToImage = {
  'auto': '#auto-img',
  'motor': '#motor-img',
  'fiets': '#fiets-img'
};

// 统一处理change事件
$('#inputType').on('change', function() {
  const selectedVal = $(this).val();
  
  // 先隐藏所有图片
  $('.image-container img').hide();
  
  // 如果选中了有效选项，显示对应图片
  if (optionToImage[selectedVal]) {
    $(optionToImage[selectedVal]).show();
  }
});

简化方案2：如果图片命名和选项值匹配，直接动态修改src #

要是你的图片命名规则和选项值一致（比如auto.jpg对应选项auto），那还能更简单，甚至不用提前写多个img标签：

先修改HTML为单个img容器：

<div class="image-container">
  <img id="target-image" src="" style="display:none;" alt="Geselecteerd voertuig">
</div>

然后JS代码只需要几行：

$('#inputType').on('change', function() {
  const selectedVal = $(this).val();
  const $img = $('#target-image');
  
  if (selectedVal) {
    // 直接设置图片路径并显示
    $img.attr('src', `${selectedVal}.jpg`).show();
  } else {
    // 没选中选项时隐藏并清空src
    $img.hide().attr('src', '');
  }
});

这两种方案都能大幅减少重复代码，而且以后维护起来超级方便——比如要加个bus选项，第一种方案就在映射对象里加'bus': '#bus-img'，第二种方案只要放一张bus.jpg就行，完全不用动事件逻辑～

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