本文介绍如何在 jQuery 中通过 html() 方法动态更新带图标的按钮文本，确保垃圾箱图标（如 Bootstrap Glyphicons）始终显示，不受文本内容变化影响。
本文介绍如何在 jquery 中通过 `html()` 方法动态更新带图标的按钮文本，确保垃圾箱图标（如 bootstrap glyphicons）始终显示，不受文本内容变化影响。
在构建具有交互性的管理界面时，常需根据用户选择动态更新操作按钮的文案与状态。例如，“删除所选项”按钮需实时反映已勾选复选框数量，同时保持视觉一致性——尤其是图标（如 ）必须始终可见，不可因 .text() 调用被意外清除。
关键问题在于：原始代码使用 $('#sel_button').text(...) 会完全替换按钮内所有 HTML 内容，导致原有 图标丢失。正确做法是改用 .html() 方法，显式拼接图标 HTML 与动态文本：
function toggledDeleteAllBtn() {
const checkedCount = $('.customer_checkbox:checked').length;
if (checkedCount > 0) {
$('#sel_button').html(
'<i class="glyphicon glyphicon-trash"></i> Delete all selected (' + checkedCount + ')'
);
} else {
$('#sel_button').html(
'<i class="glyphicon glyphicon-trash"></i> Delete all selected'
);
}
}
// 绑定事件监听（推荐使用事件委托）
$(document).on('change', '.customer_checkbox', toggledDeleteAllBtn);
// 初始化状态
toggledDeleteAllBtn();✅ 注意事项与最佳实践：
MDWechat微信主题模块
下载
MDWechat是一款xposed插件,能够使使微信Material Design化。功能实现的功能有:1.主界面 TabLayout Material 化,支持自定义图标2.主界面 4 个页面背景修改3.全局 ActionBar 和 状态栏 颜色修改,支持主界面和聊天页面的沉浸主题(4.0新增)4.自动识别微信深色模式以调整MDwechat配色方案(3.6新增)5.主界面添加悬浮按钮(Float
- 勿用 .text() 修改含 HTML 的按钮：.text() 仅处理纯文本，会剥离所有标签；.html() 才能安全维护图标结构。
- 图标标签需闭合完整：原始示例中 缺少闭合斜杠（虽 HTML5 允许省略，但建议显式闭合以提升可维护性）。
- 事件绑定推荐委托方式：使用 $(document).on('change', '.customer_checkbox', ...) 可兼容后续动态插入的复选框，避免重复绑定。
- 初始化调用不可遗漏：页面加载后应主动执行一次 toggledDeleteAllBtn()，确保按钮初始状态正确（如默认无勾选时显示“Delete all selected”）。
- 依赖项需按序加载：确保 jQuery、Bootstrap CSS/JS 按正确顺序引入（CSS 在前，jQuery 在 Bootstrap JS 前），否则图标可能不渲染或 JS 报错。
该方案简洁可靠，适用于任何基于 Bootstrap 3.x + Glyphicons 的项目，也可轻松适配 Font Awesome（仅需替换 类名，如 fa fa-trash）或现代 SVG 图标方案。
立即学习“Java免费学习笔记（深入）”；
