JQuery 点击按钮弹窗加载TAB数据，如何避免每个TAB滚动加载下一页时混淆分类？

本篇文章给大家分享《JQuery 点击按钮弹窗加载TAB数据，如何避免每个TAB滚动加载下一页时混淆分类？ 》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

JQUERY如何实现点击按钮弹窗加载TAB数据，每个TAB滚动到底部进行AJAX翻页？

问题：

点击不同分类标签加载对应分类数据，但每个分类滚动加载下一页数据时，仍然会加载上一个已点击分类的内容。

原因：

在监听滚动事件时，没有针对不同的分类标签分别处理，导致所有分类都加载同一分类的下一页数据。

解决方案：

使用全局变量跟踪当前选中的分类ID，并在监听滚动事件时，判断当前滚动的是哪个分类标签，从而针对性地加载对应分类的下一页数据。

代码示例：

// 当前选中的分类ID
let currentCategoryId = 0;

$(document).on('click', '.btn', function() {
  currentCategoryId = $(this).data('id');
  loadCategoryData(currentCategoryId, 1);
});

$('.tab_p p').click(function() {
  currentCategoryId = $(this).data('id');
  loadCategoryData(currentCategoryId, 1);
});

function loadCategoryData(categoryId, page) {
  // ... 其他代码
  
  // 监听滚动事件
  $('.tab_item').scroll(function() {
    if ($(this).scrollTop() + $(this).height() >= $('.tab_item')[0].scrollHeight) {
      // 滚动到底部时加载下一页数据
      currentPage++;
      if (currentPage <= totalPages) {
        loadPageData(currentCategoryId, currentPage);
      }
    }
  });
}

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JQuery 点击按钮弹窗加载TAB数据，如何避免每个TAB滚动加载下一页时混淆分类？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。