本文介绍如何使用 jquery 实现按钮点击后动态切换背景图片，并修正原代码中 css 选择器误用、内联事件耦合、逻辑冗余等问题，提供简洁、可维护的交互方案。
本文介绍如何使用 jquery 实现按钮点击后动态切换背景图片，并修正原代码中 css 选择器误用、内联事件耦合、逻辑冗余等问题，提供简洁、可维护的交互方案。
在 Web 开发中，常见的“点赞/点踩”交互往往需要点击时切换图标状态（如从灰色 thumbs-up 切换为彩色）。原始代码存在多个关键问题：
- 混淆 ID 与 class 选择器（如 #thumb-up-black 是 ID，却试图用 .toggleClass() 当作 class 使用）；
- 对 <img> 标签错误地应用 background-image（应使用 src 或 CSS 背景）；
- 内联 onclick 绑定导致 HTML 与 JS 紧耦合；
- checkRating() 函数逻辑冗余（直接传入 true 却仍做条件判断）；
- 状态变量（clickedThumbUP）未用于实际状态管理，失去“切换”意义。
✅ 推荐方案：改用 <button> + CSS 类控制 + jQuery 事件委托
<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');
}? 关键改进说明：
- ✅ 状态即 CSS 类：无需全局布尔变量，toggleClass() 自动维护切换逻辑；
- ✅ 解耦结构与行为：移除 onclick，用 $('.thumb-btn').on('click', ...) 统一管理；
- ✅ 语义化命名：.thumb-btn 表示组件，.thumb-up / .thumb-up-active 明确状态；
- ✅ 可扩展性强：后续添加“点踩”只需复制结构并替换类名与图片 URL，无需修改 JS 主逻辑。
⚠️ 注意事项：
- 若必须使用 <img> 标签，请统一用 attr('src', ...) 切换，避免混用 background-image；
- 生产环境建议将图标转为 SVG 或字体图标（如 Font Awesome），提升缩放兼容性与加载性能；
- 如需持久化用户操作（如记录已点赞），应在 click 回调中调用 API 并更新 UI 状态。
该方案兼顾可读性、可维护性与现代前端实践，适合初学者快速掌握交互开发核心模式。
