嘿，我帮你找出代码里的几个问题啦，这些就是图片没切换的根源：

问题1：点击事件没传正确参数 #

你写的onClick='changeImage()'里没有传递任何值，导致函数里的inobj是undefined，switch语句根本找不到对应的分支，自然不会执行图片切换逻辑。而且<li>标签的value属性不是它的标准属性（li的value仅在有序列表里用来定义数字序号），应该用自定义data属性来存储标识，比如data-target="L1"。

问题2：重复的ID属性 #

HTML里所有<ul>都用了id='parentlist'，所有<li>都用了id='list'，但ID在页面中必须是唯一的，重复ID会导致DOM选择器行为异常，也不符合HTML规范。这里其实不需要重复ID，直接用class或者去掉ID就行。

问题3：图片路径赋值错误 #

你给img的src赋值的是数组（比如['image1.jpg', 'image2.jpg']），但<img>的src属性只能接受单个字符串路径，数组是无效值，浏览器根本不知道该加载哪张图。如果你的需求是每个列表项对应两张图、点击可切换，那需要额外的逻辑来实现，不能直接给src赋值数组。

修正后的代码（先实现单个图切换的基础版本） #

HTML部分

<!-- FIRST GROUP-->
<button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
  <strong>TOP TIER CARRIERS </strong>
  <span class="caret"></span>
</button>
<ul class="dropdown-menu">
  <li data-target="L1" onClick="changeImage(this.dataset.target)">LIST1</li>
  <li data-target="L2" onClick="changeImage(this.dataset.target)">LIST2</li>
  <li data-target="L3" onClick="changeImage(this.dataset.target)">LIST3</li>
  <li data-target="L4" onClick="changeImage(this.dataset.target)">LIST4</li>
  <li data-target="L5" onClick="changeImage(this.dataset.target)">LIST5</li>
</ul>

<!-- SECOND GROUP-->
<button name="button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
  <strong>TOP TIER CARRIERS </strong>
  <span class="caret"></span>
</button>
<ul class="dropdown-menu">
  <li data-target="L6" onClick="changeImage(this.dataset.target)">LIST1</li>
  <li data-target="L7" onClick="changeImage(this.dataset.target)">LIST2</li>
  <li data-target="L8" onClick="changeImage(this.dataset.target)">LIST3</li>
  <li data-target="L9" onClick="changeImage(this.dataset.target)">LIST4</li>
  <li data-target="L0" onClick="changeImage(this.dataset.target)">LIST5</li>
</ul>

<center><img src="defaultimage.jpg" id="image" /></center>

JS部分

function changeImage(targetKey) {
  const imageElement = document.getElementById('image');
  switch (targetKey) {
    case 'L1':
      imageElement.src = 'image1.jpg';
      break;
    case 'L2':
      imageElement.src = 'image3.jpg';
      break;
    case 'L3':
      imageElement.src = 'image5.jpg';
      break;
    case 'L4':
      imageElement.src = 'image7.jpg';
      break;
    case 'L5':
      imageElement.src = 'image9.jpg';
      break;
    case 'L6':
      imageElement.src = 'image11.jpg';
      break;
    case 'L7':
      imageElement.src = 'image13.jpg';
      break;
    case 'L8':
      imageElement.src = 'image15.jpg';
      break;
    case 'L9':
      imageElement.src = 'image17.jpg';
      break;
    case 'L0':
      imageElement.src = 'image19.jpg';
      break;
    default:
      // 没有匹配到的话，恢复默认图
      imageElement.src = 'defaultimage.jpg';
      break;
  }
}

如果你的需求是每个列表项对应两张图、点击可切换 #

可以把映射关系单独抽出来，再记录当前显示的图片索引，实现切换逻辑：

// 先定义每个列表项对应的图片组
const imageGroups = {
  'L1': ['image1.jpg', 'image2.jpg'],
  'L2': ['image3.jpg', 'image4.jpg'],
  'L3': ['image5.jpg', 'image6.jpg'],
  'L4': ['image7.jpg', 'image8.jpg'],
  'L5': ['image9.jpg', 'image10.jpg'],
  'L6': ['image11.jpg', 'image12.jpg'],
  'L7': ['image13.jpg', 'image14.jpg'],
  'L8': ['image15.jpg', 'image16.jpg'],
  'L9': ['image17.jpg', 'image18.jpg'],
  'L0': ['image19.jpg', 'image20.jpg'],
};

// 记录当前选中的列表项和显示的图片索引
let currentActiveKey = null;
let currentImageIndex = 0;

function changeImage(targetKey) {
  const imageElement = document.getElementById('image');
  const images = imageGroups[targetKey];

  if (!images) {
    // 没有匹配到，恢复默认图
    imageElement.src = 'defaultimage.jpg';
    currentActiveKey = null;
    currentImageIndex = 0;
    return;
  }

  // 如果是同一个列表项，切换图片；如果是新列表项，显示第一张图
  if (currentActiveKey === targetKey) {
    currentImageIndex = (currentImageIndex + 1) % images.length;
  } else {
    currentActiveKey = targetKey;
    currentImageIndex = 0;
  }

  imageElement.src = images[currentImageIndex];
}

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