如何将图片作为选择器 实现选中跳转及选中状态图标切换

你现有代码存在两个核心问题：getval函数里的self指向全局window对象，拿不到选中的图片值；没有单独维护选中状态，无法实现选中后的图标持久切换效果。可以按下面的方式修改：

完整修改代码 #

JS部分 #

// 全局变量存储当前选中的选项，默认未选中
let selectedValue = null;

// 图片选中处理函数
function selectOption(ele, value) {
  // 先重置两张图片为未选中的默认状态
  const universalBtn = document.querySelector('.universal-button');
  const disneyBtn = document.querySelector('.disney-button');
  universalBtn.src = '/Archives/Universal Botao.png';
  disneyBtn.src = '/Archives/Disney Botao.png';

  // 更新选中值，把当前点击的图片切换为选中态图标
  selectedValue = value;
  if (value === 1) {
    ele.src = '/Archives/Disney Universal Rosa.png';
  } else {
    ele.src = '/Archives/Disney Botao Rosa.png';
  }
}

// 鼠标悬停处理：未选中时才切换hover图标
function handleHover(ele, value) {
  if (selectedValue !== value) {
    if (value === 1) {
      ele.src = '/Archives/Disney Universal Rosa.png';
    } else {
      ele.src = '/Archives/Disney Botao Rosa.png';
    }
  }
}

// 鼠标移出处理：未选中时才切回默认图标
function handleOut(ele, value) {
  if (selectedValue !== value) {
    if (value === 1) {
      ele.src = '/Archives/Universal Botao.png';
    } else {
      ele.src = '/Archives/Disney Botao.png';
    }
  }
}

// NEXT按钮跳转逻辑
function getval() {
  if (!selectedValue) {
    alert('请先选择一个园区');
    return;
  }
  if (selectedValue === 1) {
    window.location.href = "universal-result.html";
  } else if (selectedValue === 2) {
    window.location.href = "disney-result.html";
  }
}

HTML部分 #

<body class="choosepark-body">
  <p class="text-choosepark">Você quer ingresso para qual complexo?</p>
  <input 
    type="image" 
    src="/Archives/Universal Botao.png" 
    onmouseover="handleHover(this, 1)" 
    onmouseout="handleOut(this, 1)"
    onclick="selectOption(this, 1)"
    class="universal-button" 
    value="1"
  >
  <input 
    type="image" 
    src="/Archives/Disney Botao.png" 
    onmouseover="handleHover(this, 2)" 
    onmouseout="handleOut(this, 2)"
    onclick="selectOption(this, 2)"
    class="disney-button" 
    value="2"
  >
  <button onclick="getval()" class="next-button">NEXT</button>
</body>

实现效果说明 #

• 点击任意图片时，会自动记录选中值，同时将当前图片切换为高亮（粉色）图标，另一张图片恢复默认图标
• 鼠标悬停在未选中的图片上时，依然保留原来的hover切粉色效果，鼠标移出自动切回默认
• 选中状态下的图片会一直保持粉色高亮，不会因为鼠标移出恢复默认
• 点击NEXT按钮时，如果没选任何选项会弹出提示，选了就自动跳转到对应园区的结果页

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