JS中点击分类后，重新请求列表数据

最新推荐文章于 2024-04-12 16:39:53 发布

辰辰北

最新推荐文章于 2024-04-12 16:39:53 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 分类前端

本文链接：https://blog.csdn.net/weixin_42943920/article/details/122502592

JavaScript 专栏收录该内容

77 篇文章

订阅专栏

本文介绍如何在JavaScript中处理用户点击分类后，动态请求并更新列表数据的前端技术。通过监听事件、发送Ajax请求及DOM操作，实现实时刷新页面列表内容，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 切换分类事件
category.addEventListener('click',e => {
  e = e || window.event;
  let target = e.target; // li标签及其内容
  // 判断点击的对象是li
  if(target.nodeName === 'LI'){
    // 切换类名
    // ...category.children 是所有li的伪数组
    // 可通过展开运算符...，放到中括号中，作为数组
    // console.log([...category.children]);
    [...category.children].forEach(item => {
      // item.className = '' //这种方法让每一个li都有class属性
      item.classList.remove('active')
    })
    target.classList.add('active')
    // 将选中的分类添加给info
    info.category = target.innerText === '全部'? '':target.innerText
    // 筛选后回到第一页
    info.current = 1;
    // 重新请求列表数据
    getList()
  }
})