本文主要是介绍web蓝桥杯真题：年度明星项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
代码及注释：
//全部数据
var allData = []
// 每次需要加载的数量
var num = 15// TODO: 请在此补充代码实现项目数据文件和翻译数据文件的请求功能
$.get({url: './js/all-data.json'}).then(res => {allData = resloading(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 //数量加15loading(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 => { ...})
这篇关于web蓝桥杯真题：年度明星项目的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
