本文介绍如何使用 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";
});
});✅ 原理说明：
- $('.SM') 一次性选中所有「See More」按钮；
- $(this).next('.Copy') 精准定位当前点击按钮的同级下一个兄弟元素（即紧邻的 .Copy 按钮），避免依赖索引或全局变量；
- toggle() 自动切换 display 状态（none ↔ block），无需手动判断；
- text(function) 回调写法动态读取并反转按钮文本，语义清晰、无状态残留风险。
⚠️ 注意事项：
- 必须在页面加载完成后执行该脚本（推荐包裹在 $(document).ready() 或简写 $(function(){...}) 中）；
- 需引入 jQuery 库（建议使用 CDN，如 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>）；
- HTML 结构需保持 .SM 与 .Copy 为同一父容器（.BTN）下的相邻兄弟节点——当前示例完全符合此要求，无需调整 HTML；
- 若后续需增强「Copy」功能（如真实复制文本），可在 .Copy 按钮上统一绑定事件：
$('.Copy').click(function() { const content = $(this).closest('.box').find('.content p').text(); navigator.clipboard.writeText(content) .then(() => alert('Copied successfully!')) .catch(err => console.error('Failed to copy: ', err)); });
? 进阶提示：
如需支持更多状态（如加载中、已复制提示）、动画过渡或响应式交互，可结合 CSS transition、addClass/removeClass 或 jQuery 的 fadeIn/fadeOut 进一步优化体验——但基础逻辑仍由上述 3 行代码稳固承载。
简洁不是牺牲可读性，而是用更高级的抽象消除重复。一行选择器，两行行为控制，让代码回归意图本身：「点击展开，再点收起；同时显示/隐藏对应复制按钮」——这才是前端工程化的优雅实践。
