本文介绍如何使用 jquery 将重复冗长的原生 javascript 事件绑定逻辑，精简为仅 3 行核心代码，实现多组「see more / see less」切换与关联「copy」按钮显隐控制，大幅提升可维护性与可扩展性。
在实际开发中，当页面存在多个结构相同的信息卡片（如 .box），每张卡片内都包含一个「See More」按钮和一个默认隐藏的「Copy」按钮时，若采用原生 JS 逐个获取元素、分别绑定事件（如 a[0], a[1], a[2]），不仅代码冗余、难以维护，而且新增卡片还需手动追加事件监听——极易出错且违背 DRY 原则。
使用 jQuery 可以轻松解决这一问题。其核心思想是：利用事件委托与 DOM 相对定位，通过单次绑定实现批量控制。
只需以下三行 jQuery 代码，即可完成全部功能：
$('.SM').click(function() {
$(this).next('.Copy').toggle(); // 切换相邻 Copy 按钮的显示/隐藏
$(this).text(function(i, text) {
return text === "See More" ? "See Less" : "See More";
});
});
✅ 原理说明：
