点击按钮获取并展示后端表格对应分类数据的问题求助

核心修改逻辑 #

1. 全局缓存全量分类数据，避免每次点击按钮重复发起接口请求
2. 改造展示函数，支持传入动态过滤参数，不再写死category_id判断逻辑
3. 给所有分类按钮绑定点击事件，点击时传入对应分类标识触发过滤渲染
4. 修复原代码中循环内重复操作DOM的性能问题

修改后完整代码 #

1. 数据请求与全局缓存

// 全局存储全量分类数据
let allCategoryData = [];

function getDefCategories() {
  $.ajax({
    url: `getcategory.php`
  }).done(function(res) {
    res = JSON.parse(res)
    allCategoryData = res.catName
    // 首次加载默认展示lifestyle分类
    showCategoriesByType('lifestyle')
  })
}

2. 动态分类展示函数

function showCategoriesByType(categoryName) {
  let outputOption = ``
  // 按传入的分类名动态过滤
  let filteredPosts = allCategoryData.filter(item => item.name === categoryName)
  
  for (let each of filteredPosts) {
    outputOption += `
    <div class="col-sm-5">            
      <div class='card mb-3'>
        <img src='https://preview.colorlib.com/theme/wordify/images/ximg_5.jpg.pagespeed.ic.efC6YUsPoM.webp' class='card-img-top' alt='...'>
        <div class='card-body'>
          <h3>${each.title}</h3>
          <p class='card-text'>${each.description}</p>
          <p class='card-text' style='font-size: 10px'>Posted: ${each.date}</p>
          <p class='card-text'>Category: ${each.name}</p>
        </div>
      </div>
    </div>
    `
  }
  // 统一渲染DOM
  $('#defPost').html(outputOption)
}

3. 按钮点击事件绑定

// 页面DOM加载完成后执行
$(function() {
  // 页面初始化拉取数据
  getDefCategories()
  
  // 绑定所有分类按钮点击事件
  $('.sub-menu a').click(function() {
    let currentCategory = $(this).attr('id')
    showCategoriesByType(currentCategory)
  })
})

可选优化方案（更稳妥） #

如果担心分类名称后续变动影响匹配，可以给按钮新增自定义属性存储分类ID：

<ul class="sub-menu">
    <li><a href="#!" id="lifestyle" data-cid="1">Lifestyle</a></li>
    <li><a href="#!" id="food" data-cid="2">Food</a></li>
    <li><a href="#!" id="adventure" data-cid="3">Adventure</a></li>
    <li><a href="#!" id="travel" data-cid="4">Travel</a></li>
    <li><a href="#!" id="business" data-cid="5">Business</a></li>
</ul>

对应修改过滤逻辑即可：

// 点击事件里取分类ID
let currentCid = $(this).data('cid')
// 过滤逻辑改成按ID匹配
let filteredPosts = allCategoryData.filter(item => item.category_id === currentCid)

内容的提问来源于stack exchange，提问作者abralinov