如何实现含图片切换、重置、名称查询的JavaScript点击功能？

功能实现说明 #

• 点击对应动物名称按钮可切换图片框展示的对应图片
• 重置按钮可一键将图片恢复为默认占位图
• 查询按钮可弹窗展示当前展示的图片名称

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片切换 Demo</title>
  <style>
    /* 可选样式，优化展示效果 */
    .img-box {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      margin: 20px 0;
    }
    .img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .btn-group button {
      margin-right: 10px;
      padding: 6px 12px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 按钮组 -->
  <div class="btn-group">
    <button class="animal-btn" data-img-key="tiger">老虎</button>
    <button class="animal-btn" data-img-key="lion">狮子</button>
    <button class="animal-btn" data-img-key="panda">熊猫</button>
    <button id="reset-btn">重置</button>
    <button id="query-btn">查询当前图片名称</button>
  </div>
  <!-- 图片展示框 -->
  <div class="img-box">
    <img id="show-img" src="default.jpg" data-img-name="默认占位图" alt="展示图">
  </div>

  <script>
    // 配置图片映射关系，可根据实际路径修改
    const imgConfig = {
      tiger: {
        url: 'tiger.jpg',
        name: '老虎'
      },
      lion: {
        url: 'lion.jpg',
        name: '狮子'
      },
      panda: {
        url: 'panda.jpg',
        name: '熊猫'
      },
      default: {
        url: 'default.jpg',
        name: '默认占位图'
      }
    }

    const showImg = document.getElementById('show-img')
    const animalBtns = document.querySelectorAll('.animal-btn')
    const resetBtn = document.getElementById('reset-btn')
    const queryBtn = document.getElementById('query-btn')

    // 图片切换公共函数
    function setShowImg(imgKey) {
      const targetImg = imgConfig[imgKey]
      showImg.src = targetImg.url
      showImg.dataset.imgName = targetImg.name
    }

    // 绑定动物按钮点击事件
    animalBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const key = btn.dataset.imgKey
        setShowImg(key)
      })
    })

    // 绑定重置按钮事件
    resetBtn.addEventListener('click', () => {
      setShowImg('default')
    })

    // 绑定查询按钮事件
    queryBtn.addEventListener('click', () => {
      alert(showImg.dataset.imgName || '未识别到有效图片')
    })
  </script>
</body>
</html>

使用提示 #

• 可直接替换imgConfig中对应图片的url字段为你本地/线上真实的图片路径
• 如需新增更多切换选项，只需在imgConfig中新增对应配置，同时在HTML中新增对应data-img-key匹配的按钮即可

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