如何用一个 jQuery 函数动态读取并淡入淡出显示多个文本文件内容

本文介绍一种高效、可扩展的方案：仅用一个 jquery 函数，配合语义化 html 结构，即可为数百个按钮分别加载对应 txt 文件，并实现平滑的 fadeout/fadein 内容切换效果，避免重复代码与硬编码。

要为 300+ 按钮各自绑定独立的文本文件（如 file1.txt、file2.txt…），却不重复编写 300 次函数或 HTML，关键在于解耦数据与行为：将文件路径作为数据属性（data-file）内联到按钮中，由统一事件处理器读取并执行异步加载。

以下是推荐的现代、健壮且易于维护的实现方式：

✅ 推荐写法：委托事件 + data 属性驱动

  
    
      First
      Second
      Privacy Policy
      
    

    
      Click Any Question Button
    
  

  
  

? 关键优化说明：

• data-file 属性替代 onclick：HTML 更干净，符合关注点分离原则；便于后续用 JS 批量生成（例如从 JSON 配置渲染按钮）。
• 事件委托（.on('click', '.button', ...)）：即使按钮是后期动态插入的（如通过 AJAX 加载），也能自动绑定，无需重新初始化。
• .stop(true, true)：清除未完成的动画队列，防止多次点击引发闪烁或卡顿。
• 路径拼接安全：使用模板字符串 files/${fileName}，明确约定所有文件位于 files/ 目录下，便于统一管理。
• 错误处理 .fail()：当文件不存在或网络失败时，友好提示而非静默失败。
• .trim() 清理换行/空格：避免 txt 文件末尾空行导致多余空白。

? 进阶建议（面向 300+ 场景）：

• 配置驱动渲染：将按钮元数据存为 JSON（如 questions.json），用 JS 动态生成按钮列表，彻底消除 HTML 手动维护成本；
• 缓存机制：对已加载过的文件内容做内存缓存（如 const cache = {}），避免重复请求；
• 加载状态提示：在 .answerBox 中临时显示 Loading... 或骨架屏，提升用户体验；
• 支持 Markdown 或简单 HTML：若未来需富文本，可改用 .html() 并配合 sanitize-html 库保障安全。

该方案兼顾简洁性、可维护性与性能，一次编写，终身适配——无论 3 个还是 300 个按钮，HTML 和 JS 都无需结构性修改。