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

Outcir2024-04-10 12:35

代码及注释：

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 => { ...})