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

如何通过点击按钮切换图片（基于 jQuery 的优雅实现）

本文介绍如何使用 jquery 实现按钮点击后动态切换背景图片，并修正原代码中 css 选择器误用、内联事件耦合、逻辑冗余等问题，提供简洁、可维护的交互方案。

本文介绍如何使用 jquery 实现按钮点击后动态切换背景图片，并修正原代码中 css 选择器误用、内联事件耦合、逻辑冗余等问题，提供简洁、可维护的交互方案。

在 Web 开发中，常见的“点赞/点踩”交互往往需要点击时切换图标状态（如从灰色 thumbs-up 切换为彩色）。原始代码存在多个关键问题：

混淆 ID 与 class 选择器（如 #thumb-up-black 是 ID，却试图用 .toggleClass() 当作 class 使用）；
对标签错误地应用 background-image（应使用 src 或 CSS 背景）；
内联 onclick 绑定导致 HTML 与 JS 紧耦合；
checkRating() 函数逻辑冗余（直接传入 true 却仍做条件判断）；
状态变量（clickedThumbUP）未用于实际状态管理，失去“切换”意义。

✅ 推荐方案：改用

<div class="rating-img">
  <button class="thumb-btn thumb-up"></button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
$(document).ready(function() {
  $('.thumb-btn').on('click', function() {
    $(this).toggleClass('thumb-up thumb-up-active');
  });
});
</script>

对应 CSS（分离关注点，语义清晰）：

jQuery 1.12.4

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

下载

.thumb-btn {
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.thumb-up {
  background-image: url('https://dl.dropboxusercontent.com/scl/fi/vbid7c77txd1eplkm1b6f/icons8-thumbs-up-50.png?rlkey=es8b13t6uc3cptkbn94kwdfic&dl=1');
}

.thumb-up-active {
  background-image: url('https://dl.dropboxusercontent.com/scl/fi/ufflmo9rk3oey45v04dlo/icons8-thumbs-up-50_b.png?rlkey=thmvs34cuo7fiw66wzkaj8o74&dl=1');
}

? 关键改进说明：