为什么我的JQuery弹窗AJAX加载TAB对应分类ID数据，只有第一个分类滚动加载正常，其他分类却加载第一个分类的内容？

jquery点击按钮弹窗，并ajax加载tab对应分类id数据

问题：点击弹窗的按钮，并AJAX加载特定分类ID的数据，每个分类TAB滚动到底部进行AJAX翻页，但只有第一个分类滚动加载正常，其他分类加载的是第一个分类的内容。

解答：

在原来的代码中，未设置分类ID和当前页码，也不在AJAX请求前判断是否正在加载中，导致了上述问题。改进后的代码如下：

// 初始化分类ID currentPage total 
let categoryId = 1, currentPage = 1, total = 0;
// 是否加载中
let isLoading = false;

// 加载分类数据
function loadCategoryData(id, page) {
    $(".tab_item").html('加载中...');
    $(this).addClass('cur').siblings().removeClass('cur');
    loadPageData(id, page);
}

// 监听滚动事件
$('.tab_item').scroll(function () {
    if (isLoading) {
        return;
    }
    //  判断是否滚动到底部距离150px 加载更多
    const scrollTop = $(this).scrollTop();
    const scrollHeight = $(this).prop('scrollHeight');
    const containerHeight = $(this).outerHeight();

    if (scrollHeight - scrollTop - containerHeight < 150) {
        // 滚动到底部距离小于150px，加载更多数据
        currentPage++;
        if (currentPage <= total) {
            loadPageData(categoryId, currentPage);
        }
    }

});

// 模拟个函数，用于加载某一页的数据
function getData(categoryId, page) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 随机返回page条数据
            const list = [];
            // 每次返回20条数据
            for (var i = 0; i < 20; i++) {
                list.push({
                    title: '分类:' + categoryId + ',标题:' + i,
                    img_url: 'https://picsum.photos/200/300?random=' + i
                });
            }
            resolve({
                list, // 当前页的数据
                page, // 当前页码
                totalPages: 100 // 后端返回的总页数
            });
        }, 1000);
    });
}

function loadPageData(categoryId, page) {
    // 判断是否正在加载中
    if (isLoading) {
        return;
    }
    isLoading = true;
    getData(categoryId, page).then(({ list, page, totalPages }) => {
        // 更新总页数
        total = totalPages;
        let html = "";
        for (var i = 0; i < list.length; i++) {
            html += '<div>@@##@@<span>"' + list[i].title + '"</span></div>';
        }
        $(".tab_item").append(html);
    }).finally(() => {
        isLoading = false;
    });
}

在修改后的代码中：

• 初始化了分类ID（categoryId）、当前页码（currentPage）、总页数（total）和加载状态（isLoading）。
• 在AJAX请求前判断是否正在加载中，防止重复发送请求。
• 通过监听滚动事件实现AJAX翻页。
• 使用模拟数据函数getData模拟后端返回的数据，方便测试。实际项目中使用AJAX请求调用后端接口获取数据。

以上就是为什么我的JQuery弹窗AJAX加载TAB对应分类ID数据，只有第一个分类滚动加载正常，其他分类却加载第一个分类的内容？的详细内容，更多请关注其它相关文章！