如何用单个jQuery函数读取并显示不同文本文件？

核心思路 #

利用自定义数据属性存储每个按钮对应的文件路径，配合事件委托实现单个函数处理所有按钮的点击逻辑，同时完成内容的淡入淡出切换。

步骤实现 #

1. 给按钮添加数据属性
   给所有按钮统一添加类名（比如file-load-btn），并通过data-file属性绑定对应的文本文件路径：

   <!-- 示例按钮 -->
   <button class="file-load-btn" data-file="notary1.txt">公证文件1</button>
   <button class="file-load-btn" data-file="notary2.txt">公证文件2</button>
   <!-- ... 其余300+按钮依此类推 -->
   
   <!-- 用于显示内容的自定义div -->
   <div id="notary-content"></div>
   

2. 编写通用点击处理函数
   使用jQuery的事件委托（针对大量元素更高效），绑定一次事件即可处理所有按钮的点击：

   $(function() {
     // 事件委托：监听所有.file-load-btn的点击
     $(document).on('click', '.file-load-btn', function() {
       // 获取当前按钮对应的文件路径
       const targetFile = $(this).data('file');
       const $contentDiv = $('#notary-content');
   
       // 先淡出旧内容，完成后加载新文件
       $contentDiv.fadeOut(300, function() {
         $.get(targetFile)
           .done(function(fileContent) {
             // 替换内容后淡入显示
             $contentDiv.html(fileContent).fadeIn(300);
           })
           .fail(function() {
             // 加载失败时的提示
             $contentDiv.html('文件加载失败，请检查文件路径').fadeIn(300);
           });
       });
     });
   });
   

关键细节说明 #

• 事件委托优势：不用给300多个按钮逐个绑定事件，只需绑定到父元素（这里用document），性能更优，且后续新增按钮无需额外绑定事件。
• 淡入淡出逻辑：先执行淡出，等旧内容隐藏后再加载新文件并淡入，避免内容切换时的闪烁问题。
• 数据属性灵活性：data-file可以直接存储相对/绝对路径，后续修改文件路径只需修改HTML属性，无需改动JS逻辑。

内容的提问来源于stack exchange，提问作者Any Any