如何用单个jQuery文件为3个相同HTML页面读取对应文本行数据

没问题，这事儿很好解决！咱们只需要几个小改动，就能用单个jQuery文件和单个文本文件搞定三个页面的内容加载，不用再维护多份文件啦。下面是具体步骤：

步骤1：给每个HTML页面添加页面标识 #

你不用改动原有的div和元素ID，只需要在每个页面的<body>标签里加一个data-page属性，用来标记当前是第几个页面：

• 第1页的body：<body data-page="1">
• 第2页的body：<body data-page="2">
• 第3页的body：<body data-page="3">

这个标识能让jQuery轻松识别当前页面需要加载哪部分数据。

步骤2：保留你的统一文本文件 #

你的文本文件格式已经很合适了——每行开头的第一个字段就是页面编号，正好用来筛选对应数据，完全不用修改现有内容。

步骤3：编写统一的jQuery代码 #

替换掉原来的三个jQuery文件，用下面这一段代码就行，我会逐行解释逻辑：

$(document).ready(function() {
    // 1. 获取当前页面的编号（从body的data属性里读）
    const currentPage = $('body').data('page');
    // 2. 加载统一的文本文件，替换成你的实际文件路径
    $.get('your-data-file.txt', function(data) {
        // 3. 把文本按换行符拆分成行，同时过滤掉空行避免出错
        const lines = data.split(/\r?\n/).filter(line => line.trim() !== '');
        // 4. 筛选出当前页面的行，并把每行拆分成字段数组
        const pageData = lines
            .filter(line => line.split(';')[0] == currentPage)
            .map(line => line.split(';'));
        
        // 5. 给number系列元素填充数据（对应每行的第3个字段，索引为2）
        $('#number1,#number2,#number3').text(function(index) {
            return pageData[index][2];
        });
        
        // 6. 给mean系列元素填充数据（对应每行的第4个字段，索引为3）
        $('#mean1,#mean2,#mean3').text(function(index) {
            return pageData[index][3];
        });
    });
});

代码逻辑说明： #

• 读取页面标识：通过data('page')获取当前页面的编号，不用硬编码，灵活度拉满；
• 加载文本文件：用$.get异步加载你的统一文本文件，记得把your-data-file.txt改成你实际的文件路径；
• 处理文本内容：把整个文本按换行符拆分成行数组，同时过滤掉空行，避免后续逻辑出错；
• 筛选对应数据：拆分每行的字段，只保留第一个字段等于当前页面编号的行，再把这些行转成字段数组，存在pageData里；
• 填充页面元素：和你原来的逻辑类似，用text()的回调函数，根据索引对应pageData里的字段，精准填充到对应的number和mean元素中。

这样一来，三个页面共用这一个jQuery文件，加载同一个文本文件，各自只会读取对应页面的3行数据，完美实现你的需求！

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