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

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滚动加载下一页时混淆分类？的详细内容，更多请关注其它相关文章！