本文介绍如何将重复冗长的原生 javascript 事件监听代码，精简为仅需两行 jquery 的通用解决方案，统一处理多个“see more / see less”切换按钮及对应 copy 按钮的显隐与文本切换。
在实际开发中，面对多个结构一致的折叠面板（如信息卡片），若为每个按钮单独编写 addEventListener 和条件判断逻辑，不仅代码冗余、难以维护，还极易因索引错位引发 Bug。jQuery 提供了简洁高效的 DOM 遍历与事件委托能力，可将原本需重复三次（甚至更多）的逻辑，压缩为一次选择器匹配 + 一行事件处理。
✅ 核心优化方案
只需在页面引入 jQuery 后，添加以下两行脚本即可完成全部功能：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.SM').click(function() {
$(this).next('.Copy').toggle(); // 切换相邻 .Copy 按钮的显示状态
$(this).text((i, text) => text === 'See More' ? 'See Less' : 'See More'); // 动态切换按钮文本
});
// 可选：为 Copy 按钮添加统一复制逻辑（示例）
$('.Copy').click(function() {
const contentText = $(this).closest('.box').find('.content p').text();
navigator.clipboard.writeText(contentText)
.then(() => alert(`Copied: "${contentText.substring(0, 30)}..."`))
.catch(err => console.error('Copy failed:', err));
});
</script>? 原理说明
- $('.SM') 一次性选取所有 class="SM" 的按钮，无需手动遍历 getElementsByClassName 数组；
- $(this).next('.Copy') 利用 jQuery 的 .next() 方法精准定位同级下一个 .Copy 按钮（HTML 中 .Copy 确实紧邻 .SM），避免依赖索引匹配，结构更健壮；
- .text((i, text) => ...) 是 jQuery 的回调语法，自动传入当前元素的原始文本，实现无状态切换；
- toggle() 内置显隐逻辑，比手动设置 display: block/none 更安全可靠。
⚠️ 注意事项
- 必须确保 jQuery 已加载：<script> 标签需置于 </body> 之前，且早于自定义脚本；
- HTML 结构需保持一致：每个 .box 内 .SM 和 .Copy 必须同属 .BTN 容器，且 .Copy 紧跟 .SM 后（否则 next() 失效）；
- 若未来需支持「初始状态为展开」，可在 CSS 中移除 .Copy { display: none }，改用 JS 初始化（如 $('.Copy').hide()）；
- 原生 navigator.clipboard.writeText() 已替代 alert 示例，提升实用性——现代浏览器均支持，且无需额外权限（需 HTTPS 或 localhost 环境）。
✅ 总结
从原生 JS 的 30+ 行重复代码，到 jQuery 的 6 行核心逻辑，不仅大幅降低维护成本，更提升了代码可读性与扩展性。当新增第 4、5 个卡片时，无需修改任何 JS —— 只需复制 HTML 结构即可生效。这正是语义化选择器与链式调用带来的工程效率跃升。
