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 { setTimeout(() => { // 随机返回page条数据 const list = []; // 每次返回20条数据 for (var i = 0; i { // 更新总页数 total = totalPages; let html = ""; for (var i = 0; i < list.length; i++) { html += '@@##@@"' + list[i].title + '"'; } $(".tab_item").append(html); }).finally(() => { isLoading = false; });}
登录后复制
在修改后的代码中：
初始化了分类ID（categoryId）、当前页码（currentPage）、总页数（total）和加载状态（isLoading）。在AJAX请求前判断是否正在加载中，防止重复发送请求。通过监听滚动事件实现AJAX翻页。使用模拟数据函数getData模拟后端返回的数据，方便测试。实际项目中使用AJAX请求调用后端接口获取数据。
以上就是为什么我的JQuery弹窗AJAX加载TAB对应分类ID数据，只有第一个分类滚动加载正常，其他分类却加载第一个分类的内容？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2803841.html
