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

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《为什么我的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><img src="' + list[i].img_url + '"><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数据，只有第一个分类滚动加载正常，其他分类却加载第一个分类的内容？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。