web蓝桥杯真题:年度明星项目

代码及注释:

javascript 复制代码
//全部数据
var allData = []
// 每次需要加载的数量
var num = 15

// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能
$.get({url: './js/all-data.json'}).then(res => {
  allData = res
  loading(allData, num)   //初始加载数据
})
$.get({url: './js/translation.json'}).then(res => {
  translation = res
})
// TODO-END

// TODO: 请修改以下代码实现项目数据展示的功能
function loading(data, num) {
  $("ul > li").remove() //对已有的项目置空
  data.forEach((item, index) => { //每次加载num个项目,其中对描述(中文或英文)做出处理
    if(index < num) {  //需要展示的项目数组
      const element = { 
        icon: item.icon,
        description: currLang == "zh-cn" ? item.descriptionCN : item.descriptionEN,
        name: item.name,
        stars: item.stars,
        tags: item.tags,
      };
      // 添加至页面的项目列表中,查看页面可以看到有一行 bun 的项目数据
      $(".list > ul").append(createProjectItem(element));
    }
  })
}
// TODO-END

//点击更多
$(".load-more").click(() => {
  num += 15     //数量加15
  loading(allData, num)   //调用loading函数
  document.querySelector('.load-more').style.display = "none"
})

// 用户点击切换语言的回调
$(".lang").click(() => {
  // 切换页面文字的中英文
  if (currLang === "en") {
    $(".lang").text("English");
    currLang = "zh-cn";
  } else {
    $(".lang").text("中文");
    currLang = "en";
  }
  $("body")
    .find("*")
    .each(function () {
      const text = $(this).text().trim();
      if (translation[text]) {
        $(this).text(translation[text]);
      }
    });
  // TODO: 请在此补充代码实现项目描述的语言切换
  loading(allData, num)   //调用loading函数重新加载
});

知识点:

1.元素移除

element.remove() //删除一个子节点

parent.removeChild(child) //删除一个子节点并返回删除的节点。

2.元素添加

element.append() //添加多个节点,没有返回值

parent.appendChild(child) //追加单个节点,返回追加的 Node 节点

3.子元素选择(.list > ul) //.list类名下的ul标签元素

4.请求ajax.get({url: '...'}).then(res => { ...})

相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript