如何使用 jQuery 点击按钮弹窗，并通过 AJAX 异步加载不同分类 ID 的数据，并在每个选项卡滚动到底部时进行翻页？

如何在 jquery 中点击按钮弹窗，并使用 ajax 异步加载不同分类 id 的数据，并在每个选项卡滚动到页底后进行翻页？

对于这个问题，解决方案是：

1. 初始化分类 ID、当前页码和总页数。
2. 监听按钮点击事件，加载第一个分类的数据。
3. 监听选项卡切换事件，切换分类 ID，重新加载第一页数据。
4. 监听选项卡滚动事件，当滚动到底部时，加载下一页数据。
5. 使用 AJAX 请求从后端获取数据，更新选项卡内容。

具体代码实现如下：

知鹿匠

知鹿匠教师AI工具，新课标教案_AI课件PPT_作业批改

下载

// 初始化分类 ID、当前页码和总页数
let categoryId = 1, currentPage = 1, total = 0;
// 是否加载中
let isLoading = false;

$(document).on('click', '.btn', function() {
  loadCategoryData(categoryId, currentPage);
});

$('.tab_p p').click(function() {
  currentPage = 1;
  categoryId = $(this).data('id');
  // 加载对应分类的数据
  loadCategoryData(categoryId, currentPage);
});

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

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

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

function loadPageData(categoryId, page) {
  if (isLoading) {
    return;
  }
  isLoading = true;
  
  $.ajax({
    url: '/ajax.php?mod=tab',
    method: 'POST',
    data: {
      type_id: categoryId,
      page: page
    },
    success: function(response) {
      var obj = JSON.parse(response);
      var html = "";
      for (var i = 0; i zuojiankuohaophpcn obj.length; i++) {
        html += 'zuojiankuohaophpcndivyoujiankuohaophpcnzuojiankuohaophpcnimg src="' + obj[i].img_url + '"youjiankuohaophpcnzuojiankuohaophpcnspanyoujiankuohaophpcn"' + obj[i].title + '"zuojiankuohaophpcn/spanyoujiankuohaophpcnzuojiankuohaophpcn/divyoujiankuohaophpcn';
      }
      $(".tab_item").append(html);
    }
  }).always(function() {
    isLoading = false;
  });
}

注意：

• 上述代码中使用模拟数据（getData），实际业务中，getData 需要替换为实际的 AJAX 请求函数。
• 实际业务中，可能还需要根据需求调整滚动距离阈值（150px）。