如何通过点击按钮切换图片（jQuery 实现）-html教程-PHP中文网

如何通过点击按钮切换图片（jQuery 实现）

本文介绍如何使用 jQuery 实现按钮点击后动态切换背景图片，解决原始代码中 toggleClass 失效、CSS 选择器错配、内联事件耦合等问题，并提供简洁可靠的交互逻辑。

本文介绍如何使用 jquery 实现按钮点击后动态切换背景图片，解决原始代码中 `toggleclass` 失效、css 选择器错配、内联事件耦合等问题，并提供简洁可靠的交互逻辑。

在前端开发中，实现“点击切换图标”是常见需求（如点赞/取消点赞）。原始代码存在多个关键问题：

混淆 ID 与 class 用法（如 #thumb-up-black 是 ID，却试图用 toggleClass() 切换）；
对标签错误使用 background-image（应改用 src 或改用 button + background）；
内联 onclick 属性导致逻辑耦合、难以维护；
checkRating() 函数冗余（直接传布尔值判断无实际意义）；
状态变量（clickedThumbUP）未用于真实状态管理，导致无法实现“切换”效果（即再次点击恢复原图）。

✅ 推荐方案：使用，兼顾语义性、可维护性与可扩展性。

✅ 正确实现步骤

HTML 结构优化：移除内联 JS，使用语义化

jQuery 1.12.4
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载
```
<div class="rating-img">
<button class="thumbup" aria-label="点赞"></button>
</div>
```

CSS 定义两种状态样式（注意：使用 class，非 id）：

.rating-img button {
border: 0;
outline: 0;
width: 50px;
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}

.thumbup { background-image: url(https://www.php.cn/link/7893b5468710641ad87f8b4aa1b8777d); }

.thumbup.active { background-image: url(https://www.php.cn/link/af9be397672697e4e58cd989f724c837); }

3. **JavaScript（jQuery）逻辑精简版**（支持真·切换）：
```javascript
$(document).ready(function() {
  $('.rating-img button').on('click', function() {
    $(this).toggleClass('active');
    // 可选：获取当前状态用于后续业务逻辑
    const isLiked = $(this).hasClass('active');
    console.log('当前点赞状态：', isLiked);
  });
});

? 关键改进说明：

toggleClass('active') 实现真正的“开关”行为，无需手动维护布尔变量；

hasClass('active') 可随时读取当前状态，替代冗余的 checkRating()；

使用 $(document).ready() 确保 DOM 加载完成后再绑定事件；

aria-label 提升无障碍访问体验。